{{ src/components/Gantt.vue }}
<template>
    
  <div ref="gantt">

  </div>
</template>

<script>

   
import {gantt} from 'dhtmlx-gantt';
// import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
// import 'dhtmlx-gantt/codebase/locale/locale_cn'  // 本地化
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    },
    stafforpro: '',
    valueDate:[]
  },
  created:function(){
    // gantt.clearAll()
    console.log("tasks",this.$props.tasks);
  },
 
  methods: {
      
  },
  mounted: function () {
    gantt.clearAll()
    gantt.locale={
    date: {
        month_full: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["日", "一", "二", "三", "四", "五", "六"]
    },
    labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除日程?",
        section_description: "描述",
        section_time: "时间范围",
        section_type: "类型",

        /* grid columns */

        column_text: "任务名",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_add: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
    }
};
    // gantt.config.autosize = true;
    gantt.config.duration_unit = "hour";
    gantt.config.fit_tasks = true;
      gantt.config.drag_move = false;
    gantt.config.xml_date = "%Y-%m-%d";
    gantt.config.columns=[
        {name:"text",label:(this.stafforpro == "人员" ? "员工名称" : "项目名称"), align: "left" },
        {name:"duration",label:"计划工时（h）", align: "center" }
        // {name:"start_date", label:"开始时间", width:'*' , align: "center" },
        // {name:"duration",   label:"工时(天)", width:'*' ,   align: "center" }
    ];
    gantt.config.scale_unit = "month";	//按月显示
	  gantt.config.date_scale = "%F, %Y";		//设置时间刻度的格式（X轴） 多个尺度

	  gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题

    gantt.config.subscales = [
      {unit: "day", step: 1, date: "周%D,%d"}
    ];

    gantt.config.start_date = new Date(this.valueDate[0]);
    gantt.config.end_date = new Date(this.valueDate[1]);

    //设置任务条样式
    gantt.templates.task_class = function (start, end, item) {
      return item.parent == 0 ? "person_line" : ""
    };

    gantt.init(this.$refs.gantt);
    // this.$props.tasks.data[31].render = "split"
    gantt.parse(this.$props.tasks);
    
    // gantt.groupBy({
    //     relation_property: "owner",
    //     groups: [{key:'seya', label: "seya"},{key:'tina', label: "tina"}],
    //     group_id: "key",
    //     group_text: "label"
    // });
    console.log("props",this.$props.tasks);
  }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .person_line {
      background:#8ecaf8;
      border: #20a0ff 1px solid 
    }
</style>