From 8f15a0a94cc86b59b8d48f186c5cc25112b1e601 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Thu, 11 Aug 2022 16:41:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E7=94=98=E7=89=B9=E5=9B=BE=E9=98=B2=E6=8A=96?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 73 ++++++++++++++++++-
 1 file changed, 70 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 3beee7ff..9e17bcb3 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/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>