Browse Source

甘特图优化 说明书更新记录取消跳转

fujunwen 4 years ago
parent
commit
f2fe560ee0

+ 2 - 0
src/App.vue

@@ -351,6 +351,8 @@ body {
         line-height: 26px;
         width: 8%;
     }
+}
+.core-device-report{
     .el-table__row{
         cursor: pointer;
     }

+ 33 - 1
src/utils/ganttChart/GanttChart_day.js

@@ -62,6 +62,8 @@ export function GanttChartDay(options) {
     this.callback = options.callback || null
     // 翻页时间回调
     this.pageToCallback = options.pageToCallback || null
+    //  hover背景条
+    this.hoverEl = null
 }
 
 /**
@@ -125,10 +127,22 @@ GanttChartDay.prototype.forceRefreshGraph = function(keepTimeZone = false) {
     this.tasks.forEach((topTask) => {
         topTask.gGroup = null
     })
+    this.todayTimeLineEl = null
     this.gCanvas.destroy()
     this.initDrawingReady()
 }
 
+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)
+        }
+    })
+}
 /**
  * 准备绘制,用于初始化和强制刷新
  */
@@ -138,6 +152,7 @@ GanttChartDay.prototype.initDrawingReady = function() {
     this.drawTimeZone()
     this.processData()
     this.drawTasks()
+    this.initHoverElHandler()
     this.graphGroup = null
 }
 
@@ -485,7 +500,7 @@ GanttChartDay.prototype.drawTasks = function() {
                     let taskPGroup = taskGroup.addGroup()
                     taskGroup.addGroup(taskPGroup)
                     // 任务背景矩形,主要用于Hover效果变更颜色
-                    if (true) {
+                    if (false) {
                         let tempTaskContainerEl = taskPGroup.addShape('rect', {
                             attrs: {
                                 x: 0,
@@ -568,6 +583,23 @@ GanttChartDay.prototype.drawTasks = function() {
     })
 
     this.postDrawTasksCallBack()
+    if(true){
+        if(this.hoverEl==null){
+            let hoverEl = this.gCanvas.addShape('rect', {
+                attrs: {
+                    x: 0,
+                    y: 0,
+                    width: this.cWidth,
+                    height: this.taskRowHeight + 10,
+                    fill: '#F5F6F7',
+                    // stroke: 'black',
+                    radius: [2, 4],
+                },
+            })
+            hoverEl.setZIndex(-5)
+            this.hoverEl = hoverEl
+        }    
+    }  
 }
 
 /**

+ 40 - 4
src/utils/ganttChart/GanttChart_month.js

@@ -64,6 +64,8 @@ export function GanttChartMonth(options) {
     this.callback = options.callback || null
     // 翻页时间回调
     this.pageToCallback = options.pageToCallback || null
+    //  hover背景条
+    this.hoverEl = null
 }
 
 /**
@@ -132,6 +134,18 @@ GanttChartMonth.prototype.forceRefreshGraph = function() {
     this.initDrawingReady()
 }
 
+GanttChartMonth.prototype.initHoverElHandler = function(){
+    let that = this
+    this.gCanvas.on('mousemove', (ev)=>{        
+        if(that.hoverEl){
+            that.hoverEl.attr({
+                y: ev.y
+            })
+            that.hoverEl.setZIndex(-1)
+        }
+    })
+}
+
 /**
  * 准备绘制,用于初始化和强制刷新
  */
@@ -142,6 +156,8 @@ GanttChartMonth.prototype.initDrawingReady = function() {
         this.drawTimeZone()
         this.processData()
         this.drawTasks()
+        // this.drawTimeZone()
+        this.initHoverElHandler()
         this.graphGroup = null
     }, 200)
 }
@@ -427,7 +443,7 @@ GanttChartMonth.prototype.postDrawTasksCallBack = function() {
                     radius: [2, 4],
                 },
             })
-            this.todayTimeLineEl.setZIndex(3)
+            this.todayTimeLineEl.setZIndex(30)
         }
     }
 
@@ -455,7 +471,7 @@ GanttChartMonth.prototype.postDrawTasksCallBack = function() {
                     radius: [2, 4],
                 },
             })
-            lineEl.setZIndex(200)
+            lineEl.setZIndex(30)
         }
     }
 }
@@ -466,8 +482,10 @@ GanttChartMonth.prototype.postDrawTasksCallBack = function() {
  */
 
 GanttChartMonth.prototype.drawTasks = function() {
+
     this.graphGroup = this.gCanvas.addGroup()
     this.graphGroup._tname = 'graphGroup'
+
     // 第一层循环,用于分组,例如,维保--xxxx
     this.tasks.forEach((topTask, topIndex) => {
         try {
@@ -496,7 +514,7 @@ GanttChartMonth.prototype.drawTasks = function() {
                     let taskPGroup = taskGroup.addGroup()
                     taskGroup.addGroup(taskPGroup)
                     // 任务背景矩形,主要用于Hover效果变更颜色
-                    if (true) {
+                    if (false) {
                         let tempTaskContainerEl = taskPGroup.addShape('rect', {
                             attrs: {
                                 x: 0,
@@ -550,7 +568,7 @@ GanttChartMonth.prototype.drawTasks = function() {
                                     radius: [2, 4],
                                 },
                             })
-                            rectEl.setZIndex(50)
+                            rectEl.setZIndex(300)
                             rectEl._pdata = _taskItem
                             _taskItem._rectEl = rectEl
                             rectEl.on('mouseover', (ev) => {
@@ -577,9 +595,27 @@ GanttChartMonth.prototype.drawTasks = function() {
         } catch (error) {
             console.error('drawTasks error:', error)
         }
+
     })
 
     this.postDrawTasksCallBack()
+    if(true){
+        if(this.hoverEl==null){
+            let hoverEl = this.gCanvas.addShape('rect', {
+                attrs: {
+                    x: 0,
+                    y: 0,
+                    width: this.cWidth,
+                    height: this.taskRowHeight + 10,
+                    fill: '#F5F6F7',
+                    // stroke: 'black',
+                    radius: [2, 4],
+                },
+            })
+            hoverEl.setZIndex(-5)
+            this.hoverEl = hoverEl
+        }    
+    }    
 }
 
 /**

+ 1 - 1
src/views/analysis/GanttChart.vue

@@ -715,7 +715,7 @@ export default {
     }
     .chart-container {
       flex: 1;
-      overflow: auto;
+      overflow: hidden;
       background: #fff;
     }
   }