甘特图增加tooltip

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

@@ -162,7 +162,58 @@ export default {
     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.innerText.lenght > 19){
+          console.log('onmouseenter',event,node);
+          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);
@@ -184,4 +235,31 @@ export default {
       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>

fhKeeper/formulahousekeeper/timesheet/src/views/project/project_gantt.vue

@@ -625,7 +625,7 @@ export default {
     align-items: center;
   }
   .gantt_head .head_RorX{
-    width: 16vw;
+    width: 280px;
   }
   .gantt_head .head_date{
     width: 22vw;