manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/gantt.vue

{{ 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", tree:true},
        // {name:"time",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.open_tree_initially = true;
// gantt.config.layout = {
//     css: "gantt_container",
//     rows:[
//         {
//            cols: [
//             {
//               // the default grid view  
//               view: "grid",  
//               scrollX:"scrollHor", 
//               scrollY:"scrollVer"
//             },
//             { resizer: true, width: 2 },
//             {
//               // the default timeline view
//               view: "timeline", 
//               scrollX:"scrollHor", 
//               scrollY:"scrollVer"
//             },
//             {
//               view: "scrollbar", 
//               id:"scrollVer"
//             }
//         ]},
//         {
//             view: "scrollbar", 
//             id:"scrollHor"
//         }
//     ]
// }
// gantt.templates.task_time = function(start,end,task){
//   console.log('startend',start,end,task);
//   let Jstart = JSON.parse(JSON.stringify(start))
//   let Jend = JSON.parse(JSON.stringify(end))
//   let estartmonth = Jstart.getMonth() + 1
//   let estartday = Jstart.getDate()
//   let estart = Jstart.getFullYear() + '-' + (estartmonth < 10 ? '0' + estartmonth : estartmonth) + '-' + (estartday < 10 ? '0' + estartday : estartday)
//   let tend = new Date(Jend.setDate(end.getDate() - 1))
//   let eendmonth = tend.getMonth() + 1
//   let eendday = tend.getDate()
//   let eend = tend.getFullYear() + '-' + (eendmonth < 10 ? '0' + eendmonth : eendmonth) + '-' + (eendday < 10 ? '0' + eendday : eendday)
//   return estart + ' ' + eend
// };
    gantt.config.subscales = [
      {unit: "day", step: 1, date: "周%D,%d"}
    ];
    gantt.config.buttons_left = []
    gantt.config.buttons_right = ["gantt_cancel_btn"]
    gantt.config.drag_links = false
    gantt.config.drag_resize = false
    gantt.config.drag_progress = false
    gantt.config.details_on_dblclick = false
    gantt.config.lightbox.sections = [
      {name:"description", height:76, map_to:"text", type:"textarea",focus:true}
    ];

    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.config.grid_width = 350;
    gantt.plugins({tooltip: true});
    gantt.templates.tooltip_text = function (start, end, task) {
      return
    };
            
    // gantt.ext.tooltips.tooltip.show = function(event){
    //   // console.log('show', event);
     
    // }
    // console.log('show',gantt.ext.tooltips.tooltip.show);
    // gantt.ext.tooltips.tooltip = {
    //   getNode: function (params) {
    //     // console.log('getNode',params);
    //   },
    //   hide: function(){
    //     // console.log('hide');
    //   },
    //   setContent: function(){
    //     // console.log('setContent');
    //   },
    //   show: function(event){
    //     console.log('show',event);
    //   },

    // }
    gantt.ext.tooltips.attach({
      selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
      onmouseenter: (event,node) => {
        if(node.textContent.length > 19){
          let sdom = document.createElement('span')
          sdom.innerText = node.innerText
          sdom.className = 'tooltiptext'
          node.appendChild(sdom)
        }
        
      },
      onmousemove: () => {},
      onmouseleave: (event,node) => {
        let sdom = document.getElementsByClassName('tooltiptext')[0]
        if(sdom){node.removeChild(sdom)}
        
      },
      // html: (event,node) => {
      //   const targetTaskId = gantt.locate(event)
      //   const task = gantt.getTask(targetTaskId)
      //   return gantt.templates.tooltip_text(null,null,task)
      // },
      global: true
    })
    
    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",gantt);
  }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .person_line {
      background:#8ecaf8;
      border: #20a0ff 1px solid 
    }
    /* .gantt_tooltip{
      z-index: 10000;
      top: 10px !important;
      left: 10px !important;
    } */
    .tooltiptext{
      visibility: visible;
      background-color: #fff;
      color: #454545;
      box-shadow: 3px 3px 3px rgba(0,0,0,.07);
      border-left: 1px solid rgba(0,0,0,.07);
      border-top: 1px solid rgba(0,0,0,.07);
      font-size: 8pt;
      line-height: 20px;
      padding: 10px;
      /* opacity: 0;
      transition: 0.5s; */

      position: absolute;
      z-index: 10000;
      bottom: 120%;
      left: 25px;
      max-width: 300px;
      /* word-wrap: break-word;
      word-break: break-all; */
      white-space: pre-wrap;
    }
</style>