devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue渲染甘特图_vue甘特图

作者：小蓝xlanll | 2024-04-28 00:41:50

赞

踩

vue甘特图

1，安装模块

  1. 	npm install dhtmlx-gantt
  2. 	npm install font-awesome

2，引入模块

  1. 	import { gantt } from 'dhtmlx-gantt';
  2. 	import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
  3. 	import 'font-awesome/css/font-awesome.min.css';

3，定义标签、数据容器、网格及进度条样式

  1. <template>
  2.   <div class="app-container">
  3.     <div ref="gantt" class="gantt-container"></div>
  4.   </div>
  5. </template>
  1. 		 data() {
  2. 			return {
  3. 				...
  4. 					tasks: {
  5. 						data: []
  6. 					},
  7. 				...
  8. 			}
  1.   mounted() {
  2.     const than = this;
  3.     //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
  4.     gantt.config.autosize = true;
  5.     //只读模式
  6.     gantt.config.readonly = true;
  7.     //是否显示左侧树表格
  8.     gantt.config.show_grid = true;
  9.     var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.AddTask()"></div>';
  10.  
  11.     gantt.AddTask = function(){
  12.       than.handleAdd();
  13.     };
  14.  
  15.     //表格列设置
  16.     gantt.config.columns = [
  17.       {
  18.         name: 'text',
  19.         label: '计划名称',
  20.         tree: true,
  21.         width: '280',
  22.         onrender: function (task, node) {
  23.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  24.           let style = node.getAttribute("style");
  25.           switch (task.sStatus) {
  26.             case "未开始":
  27.               style += "color: #000000;"
  28.               break;
  29.             case "已开始":
  30.               style += "color: #0033EE;"
  31.               break;
  32.             case "已完成":
  33.               style += "color: #008000;"
  34.               break;
  35.             case "已逾期":
  36.               style += "color: #FF0000;"
  37.               break;
  38.             case "已取消":
  39.               style += "color: #808080;"
  40.               break;
  41.           }
  42.           node.setAttribute("style", style);
  43.         }
  44.       },
  45.       {
  46.         name: "buttons",label: colHeader,width: 75,template: function (task) {
  47.           return (
  48.             '<i class="fa fa-pencil" data-action="edit"></i>' +
  49.             '<i class="fa fa-plus" data-action="add"></i>' +
  50.             '<i class="fa fa-times" data-action="delete"></i>'
  51.             );
  52.         }
  53.       },
  54.       {
  55.         name: 'start_date',
  56.         label: '计划开始',
  57.         align: "center",
  58.         tree: false,
  59.         width: '100',
  60.         onrender: function (task, node) {
  61.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  62.         }
  63.       },
  64.       {
  65.         name: 'sPend',
  66.         label: '计划完成',
  67.         align: "center",
  68.         tree: false,
  69.         width: '100',
  70.         onrender: function (task, node) {
  71.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  72.         }
  73.       },
  74.       {
  75.         name: 'sRbegin',
  76.         label: '实际开始',
  77.         align: "center",
  78.         tree: false,
  79.         width: '100',
  80.         onrender: function (task, node) {
  81.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  82.         }
  83.       },
  84.       {
  85.         name: 'sRend',
  86.         label: '实际完成',
  87.         align: "center",
  88.         tree: false,
  89.         width: '100',
  90.         onrender: function (task, node) {
  91.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  92.         }
  93.       },
  94.       {
  95.         name: 'id',
  96.         label: '编号',
  97.         align: "center",
  98.         tree: false,
  99.         width: '100',
  100.         onrender: function (task, node) {
  101.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  102.         }
  103.       },
  104.       {
  105.         name: 'text',
  106.         label: '项目名称',
  107.         align: "center",
  108.         tree: false,
  109.         width: '100',
  110.         onrender: function (task, node) {
  111.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  112.         }
  113.       },
  114.       {
  115.         name: 'sType',
  116.         label: '计划类型',
  117.         align: "center",
  118.         tree: false,
  119.         width: '100',
  120.         onrender: function (task, node) {
  121.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  122.         }
  123.       },
  124.       {
  125.         name: 'sStatus',
  126.         label: '计划状态',
  127.         align: "center",
  128.         tree: false,
  129.         width: '100',
  130.         onrender: function (task, node) {
  131.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  132.         }
  133.       },
  134.       {
  135.         name: 'progress',
  136.         label: '完成度',
  137.         align: "center",
  138.         tree: false,
  139.         width: '100',
  140.         onrender: function (task, node) {
  141.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  142.         }
  143.       },
  144.       {
  145.         name: 'sAssignor',
  146.         label: '分配人',
  147.         align: "center",
  148.         tree: false,
  149.         width: '100',
  150.         onrender: function (task, node) {
  151.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  152.         }
  153.       },
  154.       {
  155.         name: 'sExecutor',
  156.         label: '执行人',
  157.         align: "center",
  158.         tree: false,
  159.         width: '100',
  160.         onrender: function (task, node) {
  161.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  162.         }
  163.       },
  164.       {
  165.         name: 'sReinspector',
  166.         label: '复查人',
  167.         align: "center",
  168.         tree: false,
  169.         width: '100',
  170.         onrender: function (task, node) {
  171.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  172.         }
  173.       },
  174.       {
  175.         name: 'sVerifier',
  176.         label: '核验人',
  177.         align: "center",
  178.         tree: false,
  179.         width: '100',
  180.         onrender: function (task, node) {
  181.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  182.         }
  183.       },
  184.       {
  185.         name: 'nickName',
  186.         label: '操作人',
  187.         align: "center",
  188.         tree: false,
  189.         width: '100',
  190.         onrender: function (task, node) {
  191.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  192.         }
  193.       },
  194.       {
  195.         name: 'jtaUpdateTime',
  196.         label: '更新时间',
  197.         align: "center",
  198.         tree: false,
  199.         width: '160',
  200.         onrender: function (task, node) {
  201.           node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.sStatus);
  202.         }
  203.       },
  204.       {
  205.         name: 'sDuration',
  206.         label: '工期',
  207.         align: "center",
  208.         tree: false,
  209.         width: '100',
  210.         template: function (obj) {
  211.           return obj.duration + '天'
  212.         },
  213.         hide: false
  214.       },
  215.       
  216.  
  217.     ];
  218.  
  219.     gantt.attachEvent("onTaskClick", function(id, e){
  220.       var button = e.target.closest("[data-action]");
  221.       if(button){
  222.         var action = button.getAttribute("data-action");
  223.         switch (action) {
  224.           case "edit":
  225.             than.handleUpdate({sId: id});
  226.             break;
  227.           case "add":
  228.             than.handleAdd({sId: id});
  229.             break;
  230.           case "delete":
  231.             than.handleDelete({sId: id});
  232.             break;
  233.         }
  234.         return false;
  235.       }
  236.       return true;
  237.     });
  238.  
  239.     var weekScaleTemplate = function (date) {
  240.       var dateToStr = gantt.date.date_to_str("%m %d");
  241.       var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
  242.       var weekNum = gantt.date.date_to_str("第 %W 周");
  243.       return weekNum(date)
  244.     };
  245.     var daysStyle = function (date) {
  246.       var dateToStr = gantt.date.date_to_str("%D");
  247.       if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
  248.       return "";
  249.     };
  250.     gantt.config.subscales = [{
  251.       unit: "week",
  252.       step: 1,
  253.       template: weekScaleTemplate
  254.     },
  255.     {
  256.       unit: "day",
  257.       step: 1,
  258.       format: "%d"
  259.     }
  260.     ];
  261.  
  262.     gantt.plugins({
  263.       tooltip: true
  264.     });
  265.     gantt.attachEvent("onGanttReady", function () {
  266.       var tooltips = gantt.ext.tooltips;
  267.       gantt.templates.tooltip_text = function (start, end, task) {
  268.         return task.toolTipsTxt + "<br/>" +
  269.           "阶段：" + task.text + "<br/>" +
  270.           gantt.templates.tooltip_date_format(start)
  271.       };
  272.     });
  273.  
  274.  
  275.     //设置任务条进度内容
  276.     gantt.templates.progress_text = function (start, end, task) {
  277.       return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress) +
  278.         "% </div>";
  279.     };
  280.  
  281.     //任务条显示内容
  282.     gantt.templates.task_text = function (start, end, task) {
  283.       return "<div style='text-align:center;color:#fff'>" + task.text + '(' + task.duration + '天)' +
  284.         "</div>";
  285.     }
  286.  
  287.     //任务条上的文字大小 以及取消border自带样式
  288.     gantt.templates.task_class = function (start, end, item) {
  289.       return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
  290.     }
  291.  
  292.     gantt.config.layout = {
  293.       css: "gantt_container",
  294.       cols: [{
  295.         width: 680,
  296.         min_width: 680,
  297.         rows: [{
  298.           view: "grid",
  299.           scrollX: "gridScroll",
  300.           scrollable: true,
  301.           scrollY: "scrollVer"
  302.         },
  303.         {
  304.           view: "scrollbar",
  305.           id: "gridScroll",
  306.           group: "horizontal"
  307.         }
  308.         ]
  309.       },
  310.       {
  311.         resizer: true,
  312.         width: 1
  313.       },
  314.       {
  315.         rows: [{
  316.           view: "timeline",
  317.           scrollX: "scrollHor",
  318.           scrollY: "scrollVer"
  319.         },
  320.         {
  321.           view: "scrollbar",
  322.           id: "scrollHor",
  323.           group: "horizontal"
  324.         }
  325.         ]
  326.       },
  327.       {
  328.         view: "scrollbar",
  329.         id: "scrollVer"
  330.       }
  331.       ]
  332.     };
  333.  
  334.     //时间轴图表中，任务条形图的高度
  335.     // gantt.config.task_height = 28
  336.     //时间轴图表中，甘特图的高度
  337.     // gantt.config.row_height = 36
  338.     //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  339.     gantt.config.show_task_cells = true
  340.     //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  341.     gantt.config.fit_tasks = true
  342.     gantt.config.min_column_width = 40;
  343.     gantt.config.auto_types = true;
  344.     gantt.config.xml_date = "%Y-%m-%d";
  345.     gantt.config.scale_unit = "month";
  346.     gantt.config.step = 1;
  347.     gantt.config.date_scale = "%Y年%M";
  348.     gantt.config.start_on_monday = true;
  349.     gantt.config.scale_height = 90;
  350.     gantt.config.autoscroll = true;
  351.     gantt.config.calendar_property = "start_date";
  352.     gantt.config.calendar_property = "end_date";
  353.     gantt.config.readonly = true;
  354.     gantt.i18n.setLocale('cn');
  355.  
  356.     // 初始化
  357.     gantt.init(this.$refs.gantt)
  358.     // 数据解析
  359.     gantt.parse(this.tasks)
  360.   },

4，构造数据并设置进度条颜色

  1.           let obj = {
  2.             // 展开树
  3.             open: true,
  4.             // 鼠标悬停提示标题（项目名称）
  5.             toolTipsTxt: element.projectInformation.piFullname,
  6.             // 计划名称
  7.             text: element.sName,
  8.             // 计划开始
  9.             start_date: element.sPbegin,
  10.             // 计划完成
  11.             sPend: element.sPend,
  12.             // 实际开始
  13.             sRbegin: element.sRbegin,
  14.             // 实际完成
  15.             sRend: element.sRend,
  16.             // 编号
  17.             id: element.sId,
  18.             // 工期（天）
  19.             duration: element.sDuration,
  20.             // 父节点ID
  21.             parent: element.sFid,
  22.             // 计划类型
  23.             sType: element.sType,
  24.             // 计划状态
  25.             sStatus: element.sStatus,
  26.             // 更新时间
  27.             jtaUpdateTime: element.jtaUpdateTime,
  28.             // 分配人
  29.             sAssignor: element.sAssignor,
  30.             // 执行人
  31.             sExecutor: element.sExecutor,
  32.             // 复查人
  33.             sReinspector: element.sReinspector,
  34.             // 核验人
  35.             sVerifier: element.sVerifier,
  36.             // 操作人
  37.             nickName: element.nickName,
  38.             // 编号
  39.             id: element.sId,
  40.             // 完成度
  41.             progress: element.sSchedule,
  42.           }
  43.  
  44.           // #8579DD
  45.           switch (obj.sType) {
  46.             case "总计划":
  47.               obj.color = '#5869C5';
  48.               break;
  49.             case "季度计划":
  50.               obj.color = '#E57000';
  51.               break;
  52.             case "月计划":
  53.               obj.color = '#8579DD';
  54.               break;
  55.             case "周计划":
  56.               obj.color = '#008B8B';
  57.               break;
  58.             case "其他计划":
  59.               obj.color = '#8A2BE2';
  60.               break;
  61.           }
  62.           this.tasks.data.push(obj);
  63.         }
  64.  
  65.         // 数据解析
  66.         gantt.parse(this.tasks)
  67.         // 刷新数据
  68.         gantt.refreshData();

5，相关样式

  1. </script>
  2. <style lang="scss">
  3. .firstLevelTask {
  4.   border: none;
  5.  
  6.   .gantt_task_content {
  7.     font-size: 13px;
  8.   }
  9. }
  10.  
  11. .secondLevelTask {
  12.   border: none;
  13. }
  14.  
  15. .thirdLevelTask {
  16.   border: 2px solid #da645d;
  17.   color: #da645d;
  18.   background: #da645d;
  19. }
  20.  
  21. .milestone-default {
  22.   border: none;
  23.   background: rgba(0, 0, 0, 0.45);
  24. }
  25.  
  26. .milestone-unfinished {
  27.   border: none;
  28.   background: #5692f0;
  29. }
  30.  
  31. .milestone-finished {
  32.   border: none;
  33.   background: #84bd54;
  34. }
  35.  
  36. .milestone-canceled {
  37.   border: none;
  38.   background: #da645d;
  39. }
  40.  
  41. html,
  42. body {
  43.   margin: 0px;
  44.   padding: 0px;
  45.   height: 100%;
  46.   overflow: hidden;
  47. }
  48.  
  49. .container {
  50.   height: 100%;
  51.   width: 100%;
  52.   position: relative;
  53.  
  54.   .gantt_grid_head_cell {
  55.     padding-left: 20px;
  56.     text-align: left !important;
  57.     font-size: 14px;
  58.     color: #333;
  59.   }
  60.  
  61.   .select-wrap {
  62.     position: absolute;
  63.     top: 25px;
  64.     z-index: 99;
  65.     width: 90px;
  66.     left: 180px;
  67.  
  68.     .el-input__inner {
  69.       border: none;
  70.     }
  71.   }
  72.  
  73.   .left-container {
  74.     height: 100%;
  75.   }
  76.  
  77.   .parent {
  78.     .gantt_tree_icon {
  79.       &.gantt_folder_open {
  80.         // background-image: url(../../../../assets/icons/tree-table.svg) !important;
  81.       }
  82.  
  83.       &.gantt_folder_closed {
  84.         // background-image: url(../../../../assets/icons/documentation.svg) !important;
  85.       }
  86.     }
  87.   }
  88.  
  89.   .green,
  90.   .yellow,
  91.   .pink,
  92.   .popular {
  93.     .gantt_tree_icon.gantt_file {
  94.       background: none;
  95.       position: relative;
  96.  
  97.       &::before {
  98.         content: "";
  99.         width: 10px;
  100.         height: 10px;
  101.         border-radius: 50%;
  102.         position: absolute;
  103.         left: 50%;
  104.         top: 50%;
  105.         transform: translate(-50%, -50%);
  106.       }
  107.     }
  108.   }
  109.  
  110.   .green {
  111.     .gantt_tree_icon.gantt_file {
  112.       &::before {
  113.         background: #84bd54;
  114.       }
  115.     }
  116.   }
  117.  
  118.   .yellow {
  119.     .gantt_tree_icon.gantt_file {
  120.       &::before {
  121.         background: #fcca02;
  122.       }
  123.     }
  124.   }
  125.  
  126.   .pink {
  127.     .gantt_tree_icon.gantt_file {
  128.       &::before {
  129.         background: #da645d;
  130.       }
  131.     }
  132.   }
  133.  
  134.   .popular {
  135.     .gantt_tree_icon.gantt_file {
  136.       &::before {
  137.         background: #d1a6ff;
  138.       }
  139.     }
  140.   }
  141.  
  142. }
  143.  
  144. .left-container {
  145.   height: 100%;
  146. }
  147.  
  148. .gantt_task_content {
  149.   text-align: left;
  150.   padding-left: 10px;
  151. }
  152.  
  153.  
  154.  
  155. #gantt_here{
  156.   width: 100vw;  
  157.   height: 100vh;
  158. }
  159.  
  160.  
  161. .fa {
  162.   cursor: pointer;
  163.   font-size: 14px;
  164.   text-align: center;
  165.   opacity: 0.2;
  166.   padding: 5px;
  167. }
  168.  
  169. .fa:hover {
  170.   opacity: 1;
  171. }
  172.  
  173. .fa-pencil {
  174.   color: #ffa011;
  175. }
  176.  
  177. .fa-plus {
  178.   color: #328EA0;
  179. }
  180.  
  181. .fa-times {
  182.   color: red;
  183. }
  184.  
  185.  
  186.  
  187. </style>

6，效果

参考：

gantthttps://docs.dhtmlx.com/gantt/

完整demo演示

http://61.134.65.198:9103/smartsite/login?redirect=%2Findexicon-default.png?t=M85Bhttp://61.134.65.198:9103/smartsite/login?redirect=%2Findex​​​​​​​备注：

数据载入基于数据库，分页查询、反向规划、表单校验等不赘述，可参考演示源码。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/499548
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号