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: [this.$t('yiYue'), this.$t('erYue'), this.$t('sanYue'), this.$t('siYue'), this.$t('thisTWuyue'), this.$t('liuYue'), this.$t('qiYue'), this.$t('baYue'), this.$t('jiuYue'), this.$t('shiYue'), this.$t('shiYiYue'), this.$t('shiErYue')],
        month_short: [this.$t('1Yue'), this.$t('2Yue'), this.$t('3Yue'), this.$t('4Yue'), this.$t('5Yue'), this.$t('6Yue'), this.$t('7Yue'), this.$t('8Yue'), this.$t('9Yue'), this.$t('10Yue'), this.$t('11Yue'), this.$t('12Yue')],
        day_full: [this.$t('xingQiRi'), this.$t('xingQiYi'), this.$t('xingQiEr'), this.$t('xingQiSan'), this.$t('xingQiSi'), this.$t('xingQiWu'), this.$t('xingQiLiu')],
        day_short: [this.$t('ri'), "一", "二", "三", "四", "五", "六"]
    },
    labels: {
        dhx_cal_today_button: this.$t('jinTian'),
        day_tab: this.$t('weekDay.day'),
        week_tab: this.$t('zhou'),
        month_tab: this.$t('weekDay.month'),
        new_event: this.$t('xinJianRiCheng'),
        icon_save: this.$t('save'),
        icon_cancel: this.$t('Shutdown'),
        icon_details: this.$t('xiangXi'),
        icon_edit: this.$t('bian-ji'),
        icon_delete: this.$t('btn.delete'),
        confirm_closing: this.$t('qingQueRenShiFouCheXiaoXiuGai'), //Your changes will be lost, are your sure?
        confirm_deleting: this.$t('shiFouShanChuRiCheng'),
        section_description: this.$t('other.describe'),
        section_time: this.$t('shiJianFanWei'),
        section_type: this.$t('types'),

        /* grid columns */

        column_text: this.$t('renWuMing'),
        column_start_date: this.$t('starttimes'),
        column_duration: this.$t('chiXuShiJian'),
        column_add: "",

        /* link confirmation */

        link: this.$t('guanLian'),
        confirm_link_deleting: this.$t('jiangBeiShanChu'),
        link_start: this.$t('kaiShi'),
        link_end: this.$t('jieShu'),

        type_task: this.$t('other.task'),
        type_project: this.$t('other.project'),
        type_milestone: this.$t('other.milestone'),

        minutes: this.$t('fenZhong'),
        hours: this.$t('time.hour'),
        days: this.$t('time.day'),
        weeks: this.$t('zhou'),
        months: this.$t('weekDay.month'),
        years: this.$t('nian')
    }
};
    // 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 == this.$t('anRenYuanChaKan') ? this.$t('lable.name') : this.$t('headerTop.projectName')), 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: 1px solid;
      @include border_color("border_color");
    }
    /* .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>