• 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 = '
      '      ;
    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.             '' +
    49.             '' +
    50.             ''
    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 + "
      "       +
    269.           "阶段：" + task.text + "
      "       +
    270.           gantt.templates.tooltip_date_format(start)
    271.       };
    272.     });
    273.  
    274.  
    275.     //设置任务条进度内容
    276.     gantt.templates.progress_text = function (start, end, task) {
    277.       return "
      " + Math.round(task.progress) +
    278.         "% 
      ";
  • };
  • //任务条显示内容
  • gantt.templates.task_text = function (start, end, task) {
  • return "
    " + task.text + '(' + task.duration + '天)' +
  • "
    ";
  • }
  • //任务条上的文字大小 以及取消border自带样式
  • gantt.templates.task_class = function (start, end, item) {
  • return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
  • }
  • gantt.config.layout = {
  • css: "gantt_container",
  • cols: [{
  • width: 680,
  • min_width: 680,
  • rows: [{
  • view: "grid",
  • scrollX: "gridScroll",
  • scrollable: true,
  • scrollY: "scrollVer"
  • },
  • {
  • view: "scrollbar",
  • id: "gridScroll",
  • group: "horizontal"
  • }
  • ]
  • },
  • {
  • resizer: true,
  • width: 1
  • },
  • {
  • rows: [{
  • view: "timeline",
  • scrollX: "scrollHor",
  • scrollY: "scrollVer"
  • },
  • {
  • view: "scrollbar",
  • id: "scrollHor",
  • group: "horizontal"
  • }
  • ]
  • },
  • {
  • view: "scrollbar",
  • id: "scrollVer"
  • }
  • ]
  • };
  • //时间轴图表中，任务条形图的高度
  • // gantt.config.task_height = 28
  • //时间轴图表中，甘特图的高度
  • // gantt.config.row_height = 36
  • //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  • gantt.config.show_task_cells = true
  • //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  • gantt.config.fit_tasks = true
  • gantt.config.min_column_width = 40;
  • gantt.config.auto_types = true;
  • gantt.config.xml_date = "%Y-%m-%d";
  • gantt.config.scale_unit = "month";
  • gantt.config.step = 1;
  • gantt.config.date_scale = "%Y年%M";
  • gantt.config.start_on_monday = true;
  • gantt.config.scale_height = 90;
  • gantt.config.autoscroll = true;
  • gantt.config.calendar_property = "start_date";
  • gantt.config.calendar_property = "end_date";
  • gantt.config.readonly = true;
  • gantt.i18n.setLocale('cn');
  • // 初始化
  • gantt.init(this.$refs.gantt)
  • // 数据解析
  • gantt.parse(this.tasks)
  • },

    • 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，相关样式

    6，效果

    参考：

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

    完整demo演示

    demohttp://116.176.33.76:9500/smartsite/schedule/scheduleInfo

    备注：

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

  • 相关阅读:
    JS Set方法
    LeetCode题目笔记——面试题 01.08. 零矩阵
    阿里P8架构师谈微服务架构：Dubbo+Docker+SpringBoot+Cloud
    UDP的报文结构和注意事项
    Vue3+vite打包配置及部分打包优化~
    python在线及离线安装库
    HTTP协议
    【java学习】访问权限修饰符（24）
    数学之美：e^x 是如何得到的
    华为OD机试真题- 目录删除-2023年OD统一考试（B卷）
  • 原文地址：https://blog.csdn.net/zj850324/article/details/126361112