【VUE】甘特图使用案例

<template>
  <div>
    <div ref='ganttRef'></div>
    <section style='display: flex;justify-content: start;'>
      <pre>
      {{gantttt.data}}
      </pre>

      <pre>
        {{gantttt.links}}
      </pre>
    </section>
  </div>
</template>
<script>
import { gantt } from 'dhtmlx-gantt' // 引入dhtmlx-gantt
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

export default {
  data() {
    return {
      gantttt: {
        data: [

          /**
           *
           id：任务标识，可用来标识父子关系、连接links等
           start_date,end_date：项目开始截至时间 Date|string //（‘14-07-2022’）
           text：文本，任务的显示文字
           progress：项目的进度，用颜色深浅显示
           parent：父子关系(id标识)；子任务的parent为父任务的id
           type：任务类型，有三种，object，task，milestone；
                 object：没有时间限制，长度为包含所有子任务的长度
                 task：普通任务
                 milestone：菱形块，可表示中转关系
           * */
          {id:1,text:'xx管理系统开发',person:'张三',progress:0.2,type:'task',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-12'),open: true},
          {id:11,parent:1,text:'初始化项目',person:'李四',type:'task',progress:0.9,color:'#ff0000',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-05'),open: true},
          {id:12,parent:1,text:'前后端开发',type:'task',progress:0,color:'#00ff00',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-08')},
          {id:13,parent:1,text:'测试',type:'task',progress:0,color:'#0000ff',start_date:new Date('2023-10-08'),end_date:new Date('2023-10-10')},
          {id:14,parent:1,text:'上线',type:'task',progress:0,color:'#00ffff',start_date:new Date('2023-10-10'),end_date:new Date('2023-10-12')},

          {id:111,parent:11,text:'创建git仓库',type:'task',progress:1,color:'#880000',start_date:new Date('2023-10-02'),end_date:new Date('2023-10-03')},
          {id:112,parent:11,text:'搭建脚手架',type:'task',progress:0.5,color:'#550000',start_date:new Date('2023-10-03'),end_date:new Date('2023-10-04')},
          {id:113,parent:11,text:'完成初始化',type:'task',progress:0.1,color:'#330000',start_date:new Date('2023-10-04'),end_date:new Date('2023-10-05')},


          {id:121,parent:12,text:'前端开发',person:'甲',type:'task',progress:0,color:'#00aa00',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-07')},
          {id:122,parent:12,text:'后端开发',person:'已',type:'task',progress:0,color:'#007700',start_date:new Date('2023-10-05'),end_date:new Date('2023-10-07')},
          {id:123,parent:12,text:'前后端对接',person:'甲、已',type:'task',progress:0,color:'#003300',start_date:new Date('2023-10-07'),end_date:new Date('2023-10-08')},


          // { id: 3, text: 'Team', type: 'milestone', start_date: '14-07-2023' },
          // { id: 1, text: '1222', start_date: '25-04-2023', end_date: '01-07-2023', open: true },
          // {
          //   id: 12323544,
          //   text: '44444',
          //   start_date: '27-04-2023',
          //   end_date: '01-06-2023',
          //   duration: 5,
          //   progress: 0.5,
          //   person: 'Julia Garner',
          //   parent: 1,
          //   open: true
          // },
          // {
          //   id: 1232354422,
          //   text: '5555555555555555555555555555555555555555555555555555555555555555',
          //   start_date: new Date('2023-04-27'),
          //   end_date: new Date('2023-05-01'),
          //   duration: 2,
          //   progress: 0.2,
          //   color: '#2F80ED',
          //   person: 'Julia Garner',
          //   parent: 12323544
          // },
          // {
          //   id: 1232354421,
          //   text: '22222',
          //   start_date: new Date('2023-05-02'),
          //   end_date: new Date('2023-05-21'),
          //   duration: 2,
          //   progress: 0.3,
          //   color: '#2F80ED',
          //   parent: 12323544
          // },
          // {
          //   id: 12323545,
          //   text: '333333333333333',
          //   start_date: new Date('2023-05-15'),
          //   end_date: new Date('2023-06-30'),
          //   time: '02/01-02/20',
          //   duration: 2,
          //   progress: 0.7,
          //   parent: 1,
          //   open: true
          // },
          // {
          //   id: 12345453,
          //   text: '222222',
          //   start_date: new Date('2023-04-27'),
          //   end_date: new Date('2023-05-18'),
          //   time: '02/01-02/20',
          //   duration: 3,
          //   progress: 0.9,
          //   color: '#ED263D',
          //   parent: 12323545
          // }
        ],
        links: [
          { id: 1, source: 11, target: 12, type: '0' },
          { id: 2, source: 12, target: 13, type: '0' },
          { id: 3, source: 13, target: 14, type: '0' },

          { id: 4, source: 111, target: 112, type: '0' },
          { id: 5, source: 112, target: 113, type: '0' },

          { id: 6, source: 121, target: 123, type: '0' },
          { id: 7, source: 122, target: 123, type: '0' },

          // { id: 1, source: 1, target: 3, type: '0' },
          // { id: 2, source: 1232354422, target: 1232354421, type: '0' },
          // { id: 3, source: 12345453, target: 12345437, type: '0' }
        ]
      },
      ganttColumns:[
        // { align: 'right', name: 'color', label: '', width: '150',
        //   template:function(task){
        //     if(task.color){
        //       console.log(task.color)
        //       return  "<div style='width: 10px;height: 10px;' style='background:"+ task.color+ "'>"+"</div>"}
        //   }
        // },
        { align: 'left', name: 'text', label: '', tree: true, width:"*",min_width:120,max_width:180},
        { align: 'center', name: 'person', label: '负责人', width: '120' },
        // { align: 'right', name: 'time', label: '时间节点', width: '80' },
        { align: 'center', name: 'progress', label: '进度', width: '120',template:(task)=> task.progress * 100 + '%' },
      ]
    }
  },
  created() {
  },
  mounted() {
    // 清空之前的配置
    gantt.clearAll();
    // 默认配置
    gantt.plugins({
      marker: true,
    });
    // const markerId = gantt.addMarker({
    //   start_date: new Date(2023, 4, 26),
    //   css: 'marker',
    //   text: 'makerId aaaa',
    // });
    //任务的点击方法
    gantt.attachEvent("onTaskClick", function(id,e) {
      if(e.target.className === 'gantt_task_content'){ //点击内容
        console.log(id,e.target)
      }
      return true;
    });
    gantt.config.work_time = true;
    gantt.i18n.setLocale('cn'); // 设置中文
    gantt.config.readonly = true; // 设置为只读
    gantt.config.bar_height = 32; //task高度
    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = true;
    //激活列表展开、折叠功能
    gantt.config.open_split_tasks = true;
    //用户可以通过拖拽调整行高
    gantt.config.resize_rows = true;
    //图标项目栏可以任意拖拽
    gantt.config.order_branch = true;
    gantt.config.order_branch_free = true;
    //设置甘特图表头高度
    gantt.config.scale_height = 32;
    //点击表头可排序
    gantt.config.sort = false;
    // 显示列配置，限制最大最小时间
    // gantt.config.start_date = new Date(2023, 3, 25);
    // gantt.config.end_date = new Date(2023, 5, 26);
    gantt.config.columns = this.ganttColumns;
    gantt.config.scales = [
      // { unit: 'month', step: 1, format: '%Y年%F' },
      { unit: 'week', step: 1, format:this.weekScaleTemplate } ,
      { unit: 'day', step: 1, format:this.formatWeekday } ,
    ];
    // gantt.getMarker(markerId);
    // 初始化甘特图
    gantt.init(this.$refs.ganttRef);
    gantt.parse(this.gantttt)
  },
  methods:{
    weekScaleTemplate(date){
      let dateToStr = gantt.date.date_to_str("%d");
      let endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      const weekNum = gantt.date.date_to_str('%Y年%M 第%W周 ');
      // return weekNum(date) + dateToStr(date) + "-" + dateToStr(endDate) + '日';
      return weekNum(date)
    },
    formatWeekday(date) { //1号 周一
      const dateToStr = gantt.date.date_to_str("%d");
      const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      return dateToStr(date) + ' ' + weekdays[date.getDay()];
    },
    setScaleConfig(level) {
      switch (level) {
        case "day":
          gantt.config.scales = [
            {unit: "day", step: 1, format: "%d %M"}
          ];
          gantt.config.scale_height = 27;
          break;
        case "week":
          var weekScaleTemplate = function (date) {
            var dateToStr = gantt.date.date_to_str("%d %M");
            var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
            return dateToStr(date) + " - " + dateToStr(endDate);
          };
          gantt.config.scales = [
            {unit: "week", step: 1, format: weekScaleTemplate},
          ];
          gantt.config.scale_height = 27;
          break;
        case "month":
          gantt.config.scales = [
            {unit: "month", step: 1, format: "%F, %Y"},
          ];
          gantt.config.scale_height = 27;
          break;
        case "year":
          gantt.config.scales = [
            {unit: "year", step: 1, format: "%Y"},
          ];
          gantt.config.scale_height = 27;
          break;
      }
    }
  }
}
</script>
<style>
</style>
<style lang='less' scoped>
</style>