湖里大屏(进度计划)：新增滚动甘特图防抖逻辑

src/views/projectAdmin/jlw/planProgress/centerTop.vue

@@ -1,7 +1,7 @@
 <template>
   <Card :title="title">
     <div class="gantt-chart">
-      <div class="table">
+      <div class="table" @scroll="handleScroll">
         <div class="thead">
           <div class="row">
             <div class="td">分部分项工程名称</div>
@@ -30,7 +30,14 @@
                   <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div>
                 </div>
               </div>
-              <div class="progress" :style="gantt" v-for="(gantt, index) in p.gantts" :key="index"></div>
+              <div
+                class="progress"
+                :style="gantt"
+                v-for="(gantt, index) in p.gantts"
+                :key="index"
+                @mouseenter="handleHover"
+                @mouseleave="handleLeave"
+              ></div>
             </div>
             <div class="children">
               <div class="row" v-for="child in p.children" :key="'child-' + child.pName">
@@ -47,6 +54,10 @@
             </div>
           </div>
         </div>
+        <div class="tooltips" :style="tooltipsStyle">
+          <div class="status">已逾期5天</div>
+          <div class="charger">负责人：史蒂夫</div>
+        </div>
       </div>
     </div>
   </Card>
@@ -88,7 +99,14 @@ export default {
         { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', status: 1 }
       ],
       openedIndex: 9999,
-      colors: ['#4C87FF', '#54CF8E', '#F2D026', '#FF6C7F']
+      colors: ['#4C87FF', '#54CF8E', '#F2D026', '#FF6C7F'],
+      tooltipsStyle: {
+        display: 'none',
+        left: 0,
+        top: 0
+      },
+      scrollLeft: 0,
+      scrollTimer: 0
     }
   },
   methods: {
@@ -199,6 +217,32 @@ export default {
       } else {
         this.openedIndex = index
       }
+    },
+    handleScroll(e) {
+      if (this.scrollTimer) {
+        clearTimeout(this.scrollTimer)
+      }
+      this.scrollTimer = setTimeout(() => {
+        this.scrollLeft = e.target.scrollLeft
+        this.scrollTimer = null
+      }, 100)
+    },
+    handleHover(e) {
+      const { clientX, clientY } = e
+      const decreaseLeft = clientX - 680
+      const decreaseTop = clientY - 200
+      this.tooltipsStyle = {
+        left: decreaseLeft + 'px',
+        top: decreaseTop + 'px',
+        display: 'block'
+      }
+      console.log('enter')
+    },
+    handleLeave() {
+      this.tooltipsStyle = {
+        display: 'none'
+      }
+      console.log('leave')
     }
   },
   computed: {
@@ -224,6 +268,7 @@ export default {
 .gantt-chart {
   height: 100%;
   .table {
+    position: relative;
     height: 100%;
     overflow-x: auto;
     &::-webkit-scrollbar {
@@ -356,6 +401,28 @@ export default {
         }
       }
     }
+    .tooltips {
+      position: absolute;
+      box-sizing: border-box;
+      padding: 10px;
+      width: 130px;
+      height: 65px;
+      font-size: 14px;
+      color: #fff;
+      border-radius: 8px;
+      background-color: #50a6b3;
+      .status {
+        display: inline-block;
+        margin-bottom: 6px;
+        padding: 0 10px;
+        height: 20px;
+        min-width: 60px;
+        line-height: 20px;
+        font-size: 12px;
+        border-radius: 10px;
+        background-color: #ff6c7f;
+      }
+    }
   }
 }
 </style>