Quellcode durchsuchen

甘特图task hover 效果处理

fujunwen vor 4 Jahren
Ursprung
Commit
7fc5fbc0cd
2 geänderte Dateien mit 44 neuen und 37 gelöschten Zeilen
  1. 20 16
      src/utils/ganttChart/GanttChart_day.js
  2. 24 21
      src/utils/ganttChart/GanttChart_month.js

+ 20 - 16
src/utils/ganttChart/GanttChart_day.js

@@ -64,6 +64,8 @@ export function GanttChartDay(options) {
     this.pageToCallback = options.pageToCallback || null
     //  hover背景条
     this.hoverEl = null
+    // hover背景条位置高度
+    this.hoverElY = -100;
 }
 
 /**
@@ -137,10 +139,12 @@ GanttChartDay.prototype.initHoverElHandler = function(){
     let that = this
     this.gCanvas.on('mousemove', (ev)=>{        
         if(that.hoverEl){
-            that.hoverEl.attr({
-                y: ev.y
-            })
-            that.hoverEl.setZIndex(-1)
+            if (this.hoverElY > 0) {
+                that.hoverEl.attr({
+                    y: this.hoverElY - 5
+                })
+                that.hoverEl.setZIndex(-1)
+            }
         }
     })
 }
@@ -373,19 +377,19 @@ GanttChartDay.prototype.drawTimeZone = function() {
  * 处理点击
  */
 GanttChartDay.prototype.handleClick = function(task, flag, ev) {
-    // let detailDiv = document.getElementById('detailDiv')
     if (flag == 'enter') {
-        // detailDiv.style.display = 'block'
-        // detailDiv.style.left = ev.clientX+'px';
-        // detailDiv.style.top = ev.clientY+'px';
-        // document.getElementById('detailTaskName').textContent = task._pdata.description
-        // document.getElementById('detailTaskStatus').textContent = task._pdata.status
-        // document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
-        // document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
-        // console.log('show:', task)
+        document.querySelector('#ganttContainer>canvas').style.cursor = 'pointer';
+        this.hoverElY = task.cfg.attrs.y;
+        // console.log('task', task.cfg.attrs.y)
     } else if (flag === 'leave') {
-        // detailDiv.style.display = 'none'
-        // console.log('hide:', task)
+        document.querySelector('#ganttContainer>canvas').style.cursor = 'default';
+        if(this.hoverEl){
+            this.hoverEl.attr({
+                y: -100
+            })
+            this.hoverEl.setZIndex(-5)
+            this.hoverElY = -100;
+        }
     } else {
         this.callback(task)
         // console.log('click:', task)
@@ -589,7 +593,7 @@ GanttChartDay.prototype.drawTasks = function() {
             let hoverEl = this.gCanvas.addShape('rect', {
                 attrs: {
                     x: 0,
-                    y: 0,
+                    y: -100,
                     width: this.cWidth,
                     height: this.taskRowHeight + 10,
                     fill: '#F5F6F7',

+ 24 - 21
src/utils/ganttChart/GanttChart_month.js

@@ -65,7 +65,9 @@ export function GanttChartMonth(options) {
     // 翻页时间回调
     this.pageToCallback = options.pageToCallback || null
     //  hover背景条
-    this.hoverEl = null
+    this.hoverEl = null;
+    // hover背景条位置高度
+    this.hoverElY = 0;
 }
 
 /**
@@ -137,12 +139,15 @@ GanttChartMonth.prototype.forceRefreshGraph = function() {
 
 GanttChartMonth.prototype.initHoverElHandler = function(){
     let that = this
-    this.gCanvas.on('mousemove', (ev)=>{        
+    this.gCanvas.on('mousemove', (ev)=>{
+        // console.log('ev', ev)      
         if(that.hoverEl){
-            that.hoverEl.attr({
-                y: ev.y
-            })
-            that.hoverEl.setZIndex(-1)
+            if (this.hoverElY) {
+                that.hoverEl.attr({
+                    y: this.hoverElY - 5
+                })
+                that.hoverEl.setZIndex(-1)
+            }
         }
     })
 }
@@ -370,19 +375,19 @@ GanttChartMonth.prototype.drawTimeZone = function() {
  * 处理点击
  */
 GanttChartMonth.prototype.handleClick = function(task, flag, ev) {
-    // let detailDiv = document.getElementById('detailDiv')
     if (flag == 'enter') {
-        // detailDiv.style.display = 'block'
-        // detailDiv.style.left = ev.clientX+'px';
-        // detailDiv.style.top = ev.clientY+'px';
-        // document.getElementById('detailTaskName').textContent = task._pdata.description
-        // document.getElementById('detailTaskStatus').textContent = task._pdata.status
-        // document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
-        // document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
-        // console.log('show:', task)
+        document.querySelector('#ganttContainer>canvas').style.cursor = 'pointer';
+        this.hoverElY = task.cfg.attrs.y;
+        // console.log('task', task.cfg.attrs.y)
     } else if (flag === 'leave') {
-        // detailDiv.style.display = 'none'
-        // console.log('hide:', task)
+        document.querySelector('#ganttContainer>canvas').style.cursor = 'default';
+        if(this.hoverEl){
+            this.hoverEl.attr({
+                y: 0
+            })
+            this.hoverEl.setZIndex(-5)
+            this.hoverElY = 0;
+        }
     } else {
         this.callback(task)
         console.log('click:', task)
@@ -573,12 +578,10 @@ GanttChartMonth.prototype.drawTasks = function() {
                             rectEl._pdata = _taskItem
                             _taskItem._rectEl = rectEl
                             rectEl.on('mouseover', (ev) => {
-                                document.querySelector('#ganttContainer>canvas').style.cursor = 'pointer';
-                                // this.handleClick(ev.target, 'enter', ev)
+                                this.handleClick(ev.target, 'enter', ev)
                             })
                             rectEl.on('mouseleave', (ev) => {
-                                document.querySelector('#ganttContainer>canvas').style.cursor = 'default';
-                                // this.handleClick(ev.target, 'leave', ev)
+                                this.handleClick(ev.target, 'leave', ev)
                             })
                             rectEl.on('click', (ev) => {
                                 this.handleClick(ev.target, 'click', ev)