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

vue使用甘特图dhtmlxgantt + gantt.addTaskLayer_vue dhtmlxgantt

作者：小丑西瓜9 | 2024-04-28 00:40:03

赞

踩

vue dhtmlxgantt

效果图：

甘特图

gantt安装与使用

vue版---部分功能收费

  1. 安装gantt  或  引入文件

    1. npm install dhtmlx-gantt -save
    2.  
    3. 或
    4.  
    5. import gantt from "/public/static/dhtmlxgantt/dhtmlxgantt.js";
    6. import "/public/static/dhtmlxgantt/locale/locale_cn.js";

  2. 引入---组件

  1. <template>
  2. #节点高度要给，gantt不根据内容撑开
  3.  <div ref="gantt" class="gantt-container" style="min-height: calc(85vh - 100px); width: 100%; overflow: hidden"></div>
  4. </template>
  5. <script>
  6.  import gantt from "/public/static/dhtmlxgantt/dhtmlxgantt";
  7.  import "/public/static/dhtmlxgantt/locale/locale_cn.js";
  8. </script>
  9.

 借鉴

  1. css文件地址 examples/dhtmlx_gantt/dhtmlxgantt.css · 残星落影/博客 - 码云 - 开源中国 (gitee.com)
  2. js文件地址 examples/dhtmlx_gantt/dhtmlx · 残星落影/博客 - 码云 - 开源中国 (gitee.com)

定义渲染数据 

  1. let tasks = ref({
  2.   data: [
  3.     {
  4.       id: 1,
  5.       text: "计划#1",
  6.       start_date: "2023-09-28",
  7.       end_date: "2023-10-28",
  8.       sj_start_date: "2023-09-29",
  9.       sj_end_date: "2023-10-25",
  10.       open: true,
  11.     },
  12.     {
  13.       id: 2,
  14.       text: "已完成",
  15.       start_date: "2023-09-28",
  16.       end_date: "2023-10-28",
  17.       sj_start_date: "2023-09-29",
  18.       sj_end_date: "2023-10-25",
  19.       parent: 1,
  20.     },
  21.     {
  22.       id: 3,
  23.       text: "计划#2",
  24.       start_date: "2023-03-10",
  25.       end_date: "2023-5-20",
  26.       sj_start_date: "2023-03-10",
  27.       sj_end_date: "2023-5-18",
  28.       open: true,
  29.     },
  30.     {
  31.       id: 4,
  32.       text: "已完成",
  33.       start_date: "2023-03-10",
  34.       end_date: "2023-5-20",
  35.       sj_start_date: "2023-03-10",
  36.       sj_end_date: "2023-5-18",
  37.       parent: 3,
  38.     },
  39.   ],
  40. });

 完整代码

  1. <script>
  2. onMounted(() => {
  3.   gantt.config.autosize = true;
  4.   // 只读模式
  5.   gantt.config.readonly = true;
  6.   //是否显示左侧树表格
  7.   gantt.config.show_grid = true;
  8.   //表格列设置
  9.   gantt.config.columns = [
  10.     {
  11.       name: "id",
  12.       label: "编号",
  13.       align: "center",
  14.       tree: false,
  15.       width: "50",
  16.     },
  17.     {
  18.       name: "text",
  19.       label: "计划名称",
  20.       tree: true,
  21.       width: "240",
  22.     },
  23.     {
  24.       name: "start_date",
  25.       label: "计划开始",
  26.       align: "center",
  27.       tree: false,
  28.       width: "100",
  29.     },
  30.     {
  31.       name: "end_date",
  32.       label: "计划完成",
  33.       align: "center",
  34.       tree: false,
  35.       width: "100",
  36.     },
  37.     {
  38.       name: "sj_start_date",
  39.       label: "实际开始",
  40.       align: "center",
  41.       tree: false,
  42.       width: "100",
  43.     },
  44.     {
  45.       name: "sj_end_date",
  46.       label: "实际完成",
  47.       align: "center",
  48.       tree: false,
  49.       width: "100",
  50.     },
  51.   ];
  52.   gantt.config.subscales = [
  53.     {
  54.       unit: "day",
  55.       step: 1,
  56.       format: "%d日",
  57.     },
  58.   ];
  59.   gantt.attachEvent("onGanttReady", function () {
  60.     gantt.templates.tooltip_text = function (start: any, end: any, task: any) {
  61.       return (
  62.         task.toolTipsTxt +
  63.         "<br/>" +
  64.         "阶段：" +
  65.         task.text +
  66.         "<br/>" +
  67.         gantt.templates.tooltip_date_format(start)
  68.       );
  69.     };
  70.   });
  71.   //任务条显示内容
  72.   gantt.templates.task_text = function (start: any, end: any, task: any) {
  73.     return (
  74.       "<div style='text-align:center;color:#fff'>" +
  75.       task.text +
  76.       "(" +
  77.       task.duration +
  78.       "天)" +
  79.       "</div>"
  80.     );
  81.   };
  82.   //任务条上的文字大小 以及取消border自带样式
  83.   gantt.templates.task_class = function (start: any, end: any, item: any) {
  84.     return item.$level == 0 ? "firstLevelTask" : "secondLevelTask";
  85.   };
  86.   gantt.templates.timeline_cell_class = function (item: any, date: any) {
  87.     if (date.getDay() == 0 || date.getDay() == 6) {
  88.       return "weekend";
  89.     }
  90.   };
  91.   gantt.config.layout = {
  92.     //拖拽布局
  93.     css: "gantt_container",
  94.     rows: [
  95.       {
  96.         cols: [
  97.           {
  98.             view: "grid",
  99.             id: "grid",
  100.             scrollX: "scrollHor",
  101.             scrollY: "scrollVer",
  102.           },
  103.           { resizer: true, width: 1 },
  104.           {
  105.             view: "timeline",
  106.             id: "timeline",
  107.             scrollX: "scrollHor",
  108.             scrollY: "scrollVer",
  109.           },
  110.           { view: "scrollbar", scroll: "y", id: "scrollVer" },
  111.         ],
  112.       },
  113.       { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 },
  114.     ],
  115.   };
  116.   //时间轴图表中，任务条形图的高度
  117.   //   gantt.config.task_height = 28;
  118.   gantt.config.task_height = 16;
  119.   gantt.config.row_height = 40;
  120.   //时间轴图表中，甘特图的高度
  121.   //   gantt.config.row_height = 36;
  122.   //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
  123.   gantt.config.show_task_cells = true;
  124.   //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
  125.   gantt.config.fit_tasks = true;
  126.   gantt.config.min_column_width = 40;
  127.   gantt.config.auto_types = true;
  128.   gantt.config.xml_date = "%Y-%m-%d";
  129.   gantt.config.scale_unit = "month";
  130.   gantt.config.step = 1;
  131.   gantt.config.date_scale = "%Y年%M";
  132.   gantt.config.start_on_monday = true;
  133.   gantt.config.scale_height = 90;
  134.   gantt.config.autoscroll = true;
  135.   gantt.config.readonly = true;
  136.   // gantt.i18n.setLocale("cn");
  137.   gantt.attachEvent("onTaskLoading", function (task: any) {
  138.     task.sj_start_date = gantt.date.parseDate(task.sj_start_date, "xml_date");
  139.     task.sj_end_date = gantt.date.parseDate(task.sj_end_date, "xml_date");
  140.     return true;
  141.   });
  142.   // 初始化
  143.   gantt.init(proxy.$refs.gantt);
  144.   // 数据解析
  145.   gantt.parse(tasks.value);
  146.   addTaskLayer();
  147. });
  148.  
  149. // 渲染方法
  150. function addTaskLayer() {
  151.   gantt.addTaskLayer({
  152.     renderer: {
  153.       render: function draw_planned(task: any) {
  154.         // console.log(task);
  155.         if (task.sj_start_date && task.sj_end_date) {
  156.           var sizes = gantt.getTaskPosition(
  157.             task,
  158.             task.sj_start_date,
  159.             task.sj_end_date
  160.           );
  161.           // console.log(sizes);
  162.           var el = document.createElement("div");
  163.           el.className = "baseline";
  164.           el.style.left = sizes.left + "px";
  165.           el.style.width = sizes.width + "px";
  166.           el.style.top = sizes.top + gantt.config.task_height + 17 + "px";
  167.           // console.log(el);
  168.           return el;
  169.         }
  170.         return false;
  171.       },
  172.       getRectangle: function (task: any, view: any) {
  173.         if (task.start_date && task.end_date) {
  174.           return gantt.getTaskPosition(task, task.start_date, task.end_date);
  175.         }
  176.         return null;
  177.       },
  178.     },
  179.   });
  180. }
  181.  
  182. // 切换日月周季
  183. function setScaleConfig(value: any) {
  184.   dayIndex.value = value;
  185.   if (value == "1") {
  186.     gantt.templates.timeline_cell_class = function (item: any, date: any) {
  187.       if (date.getDay() == 0 || date.getDay() == 6) {
  188.         return "weekend";
  189.       }
  190.     };
  191.   } else {
  192.     gantt.templates.timeline_cell_class = function (item: any, date: any) {
  193.       if (date.getDay() == 0 || date.getDay() == 6) {
  194.         return "";
  195.       }
  196.     };
  197.   }
  198.   switch (value) {
  199.     case "1": //日
  200.       gantt.config.xml_date = "%Y-%m-%d";
  201.       gantt.config.scale_unit = "month";
  202.       gantt.config.step = 1;
  203.       gantt.config.date_scale = "%Y年%M";
  204.       gantt.config.subscales = [
  205.         {
  206.           unit: "day",
  207.           step: 1,
  208.           date: "%d日",
  209.         },
  210.       ];
  211.       gantt.render();
  212.       break;
  213.     case "2": //周
  214.       gantt.config.scale_unit = "week";
  215.       gantt.config.step = 1;
  216.       gantt.config.date_scale = "%Y年%M";
  217.       gantt.templates.date_scale = null;
  218.       gantt.config.subscales = [
  219.         {
  220.           unit: "week",
  221.           step: 1,
  222.           date: "第%W周",
  223.         },
  224.         {
  225.           unit: "day",
  226.           step: 1,
  227.           date: "%d日",
  228.         },
  229.       ];
  230.       gantt.render();
  231.       break;
  232.     case "3": //月
  233.       gantt.config.scale_unit = "month";
  234.       gantt.config.step = 1;
  235.       gantt.config.date_scale = "%Y年";
  236.       gantt.templates.date_scale = null;
  237.       gantt.config.subscales = [
  238.         {
  239.           unit: "month",
  240.           step: 1,
  241.           date: "%M",
  242.         },
  243.       ];
  244.       gantt.render();
  245.       break;
  246.     case "4": //季
  247.       gantt.config.scale_unit = "year";
  248.       gantt.config.step = 1;
  249.       gantt.config.date_scale = "%Y年";
  250.       gantt.config.subscales = [
  251.         {
  252.           unit: "month",
  253.           step: 1,
  254.           date: "%M",
  255.         },
  256.         {
  257.           unit: "quarter",
  258.           step: 1,
  259.           format: function (date: any) {
  260.             var dateToStr = gantt.date.date_to_str("%M");
  261.             var endDate = gantt.date.add(
  262.               gantt.date.add(date, 3, "month"),
  263.               -1,
  264.               "day"
  265.             );
  266.             return dateToStr(date) + " - " + dateToStr(endDate);
  267.           },
  268.         },
  269.       ];
  270.       gantt.render();
  271.       break;
  272.   }
  273. }
  274. </script>
  275.  
  276. css样式
  277.  
  278. <style lang="scss" scoped>
  279. @import "/public/static/dhtmlxgantt/dhtmlxgantt.css";
  280.  
  281. :deep(.gantt_task_line, .gantt_line_wrapper) {
  282.   margin-top: -9px;
  283. }
  284.  
  285. :deep(.gantt_task_line) {
  286.   background-color: #3b97fe;
  287.   border: #3b97fe;
  288.   height: 15px !important;
  289.   border-radius: 100px;
  290.   border-radius: 100px;
  291. }
  292.  
  293. :deep(.gantt_task_line) {
  294.   margin-bottom: 10px !important;
  295. }
  296.  
  297. :deep(.gantt_task_progress) {
  298.   background: #ffd180;
  299.   border-top-right-radius: 100px;
  300.   border-radius: 100px;
  301. }
  302. :deep(.baseline) {
  303.   position: absolute;
  304.   border-radius: 100px;
  305.   margin-top: -12px;
  306.   height: 15px;
  307.   background: #67dd23;
  308. }
  309. :deep(.gantt_grid_scale .gantt_grid_head_cell) {
  310.   color: black !important;
  311. }
  312. :deep(.gantt_task .gantt_task_scale .gantt_scale_cell) {
  313.   color: black !important;
  314. }
  315. :deep(.gantt_layout_cell) {
  316.   ::-webkit-scrollbar {
  317.     height: 8px;
  318.   }
  319.   ::-webkit-scrollbar-track {
  320.     border-radius: 8px;
  321.     background-color: #f5f5f5;
  322.   }
  323.  
  324.   ::-webkit-scrollbar-thumb {
  325.     border-radius: 8px;
  326.     background-color: #b9b9b9;
  327.   }
  328. }
  329.  
  330. // 周末 区分
  331. :deep(.weekend) {
  332.   background: #f4f7f4;
  333. }
  334. :deep(.gantt_selected .weekend) {
  335.   background: #f7eb91;
  336. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/499543
推荐阅读
相关标签

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

  

闽ICP备14008679号