dhtmlxGantt 甘特图使用

xuedong1103

已于 2023-07-10 11:50:05 修改

阅读量558

点赞数 1

文章标签：甘特图

于 2023-07-06 17:37:27 首次发布

本文链接：https://blog.csdn.net/weixin_46880303/article/details/131581999

版权

data() {
   
    return {
   
      ganttData: {
   
        data: [
          {
   
            id: 1,
            text: "Team",
            type: "milestone",
            start_date: new Date("2022-01-25"),
          },
          {
   
            id: 2,
            text: "222",
            start_date: new Date("2022-04-25"),
            end_date: new Date("2022-07-01"),
            open: true,
            type: "object",
          },
          {
   
            id: 3,
            text: "3333",
            person: "Julia Garner",
            parent: 2,
            open: true,
          },
          {
   
            id: 4,
            text: "444",
            start_date: new Date("2022-04-28"),
            end_date: new Date("2022-07-01"),
            duration: 63,
            progress: 0.5,
            person: "Julia Garner",
            parent: 3,
          },
          {
   
            id: 5,
            text: "555",
            start_date: new Date("2022-07-02"),
            end_date: new Date("2022-08-2"),
            parent: 3,
          },
          {
   
            id: 6,
            text: "6666",
            start_date: new Date("2022-05-15"),
            end_date: new Date("2022-06-30"),
            duration: 2,
            progress: 0.5,
            parent: 2,
            open: true,
          },
          {
   
            id: 7,
            text: "7777",
            start_date: new Date("2022-04-27"),
            end_date: new Date("2022-05-18"),
            duration: 3,
            progress: 0.5,
            color: "#ED263D",
            parent: 6,
            unit: "月",
            production_cycle: 20,
            production_ability: 200,
          },
        ],
        links: [
          {
    id: 1, source: 1, target: 3, type: "0" },
          {
    id: 2, source: 3, target: 4, type: "1" },
          {
    id: 3, source: 4, target: 5, type: "1" }, // 0 开始到开始 1 结束到开始 2 结束到结束
        ],
      },
      currentTaskId: "",
    };
  },
  methods: {
   
  initGantt() {
   
      console.log('tasks', this.tasks)
      gantt.config.date_format = "%Y-%m-%d %H:%i:%s"; //  设置日期格式
      gantt.config.duration_unit = "day"; // minute, day, month
      gantt.i18n.setLocale("cn");
      gantt.plugins({
    
          marker: true 
      }); 
      var dateToStr = moment().format('YYYY-MM-DD');
      var markerId = gantt.addMarker({
   
          start_date: new Date(), //a Date object that sets the marker's date
          css: "today", //a CSS class applied to the marker
          text: "Now", //the marker title
          title: dateToStr // the marker's tooltip
      });
      gantt.getMarker(markerId);
      // 日期列显示
      gantt.config.min_column_width = 60;
      gantt.config.scale_height = 40 * 2;
      var