From 477b5a8cd128907e4acde33d12608c45043a7455 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 09:46:11 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E5=A4=96=E5=B1=82=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 167 +++++++++++++++---
 1 file changed, 147 insertions(+), 20 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 211cf33c..58ad3db7 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -1,42 +1,169 @@
 <template>
-<!-- 甘特图 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    <div class="gantt-chart">
+      <div class="table">
+        <div class="thead">
+          <div class="row">
+            <div class="td">分部分项工程名称</div>
+            <div class="td">开始日期</div>
+            <div class="td">完成日期</div>
+            <div class="td" v-for="date in dates" :key="date">
+              <div class="date">
+                <div class="month">
+                  {{ date }}
+                </div>
+                <div class="days">
+                  <div class="day" v-for="day in getDays(date)" :key="day">{{ day }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="tbody">
+          <div class="row" v-for="p in projects" :key="p.pName">
+            <div class="td">{{ p.pName }}</div>
+            <div class="td">{{ p.startTime }}</div>
+            <div class="td">{{ p.endTime }}</div>
+            <div class="td" v-for="date in dates" :key="date + 'grid-date'">
+              <div class="grids">
+                <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
 export default {
-
+  components: { Card },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
+  created() {
+    console.log(this.getDays('2022/09'), '到')
+  },
   data() {
     return {
-
-    };
+      dates: ['2020/04', '2020/05'],
+      projects: [
+        { pName: '地基与基础工程', startTime: '2020/04', endTime: '2020/05' },
+        { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
+        { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
+      ]
+    }
   },
+  methods: {
+    getDays(date) {
+      const year = date.split('/')[0]
+      const month = +date.split('/')[1]
+      const large = [1, 3, 5, 7, 8, 10, 12]
+      const normal = [4, 6, 9, 11]
+      const small = [2]
+      let count = 0
+      switch (true) {
+        case large.includes(month):
+          count = 31
+          break
+        case normal.includes(month):
+          count = 30
+          break
+        case small.includes(month):
+          count = year % 4 ? 28 : 29
+          break
+      }
 
-
+      return (() => {
+        const days = new Array(count)
+          .fill(0)
+          .map((item, index) => index + 1)
+          .filter(item => item % 2)
+        if (count === 28) {
+          days.push(28)
+        } else if (count === 30) {
+          days.push(30)
+        }
+        return days
+      })()
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
+.row() {
+  .row {
+    display: flex;
+    .td {
+      box-sizing: border-box;
+      &:nth-child(1) {
+        padding-left: 40px;
+        width: 200px;
+      }
+      &:not(:nth-child(1)) {
+        width: 100px;
+        text-align: center;
+      }
+      &:nth-child(n + 4) {
+        width: 400px;
+      }
+    }
+  }
+}
 
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+.gantt-chart {
+  .table {
+    .thead {
+      background-color: #163549;
+      border-bottom: 1px solid #234d5f;
+      .row();
+      .td {
+        height: 42px;
+        line-height: 42px;
+        .date {
+          line-height: 21px;
+          border-left: 1px solid #234d5f;
+          .month {
+            border-bottom: 1px solid #234d5f;
+          }
+          .days {
+            display: flex;
+            .day {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+    .tbody {
+      background-color: #0a1b2f;
+      border-left: 1px solid #234d5f;
+      .row();
+      .td {
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        border-right: 1px solid #234d5f;
+        border-bottom: 1px solid #234d5f;
+        .grids {
+          height: 100%;
+          display: flex;
+          .grid {
+            flex: 1;
+            height: 100%;
+            &:not(:last-child) {
+              border-right: 1px solid #234d5f;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>
-

From 1173f00bf22b4c9a40a97c566c4e8bf7ac8a68a9 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 11:07:18 +0800
Subject: [PATCH 2/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E5=86=85=E5=B1=82=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 171 ++++++++++++------
 1 file changed, 115 insertions(+), 56 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 58ad3db7..1e2a955d 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -20,13 +20,27 @@
           </div>
         </div>
         <div class="tbody">
-          <div class="row" v-for="p in projects" :key="p.pName">
-            <div class="td">{{ p.pName }}</div>
-            <div class="td">{{ p.startTime }}</div>
-            <div class="td">{{ p.endTime }}</div>
-            <div class="td" v-for="date in dates" :key="date + 'grid-date'">
-              <div class="grids">
-                <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+          <div class="row-groups open" v-for="p in projects" :key="p.pName">
+            <div class="row">
+              <div class="td">{{ p.pName }}</div>
+              <div class="td">{{ p.startTime }}</div>
+              <div class="td">{{ p.endTime }}</div>
+              <div class="td" v-for="date in dates" :key="date + 'grid-date'">
+                <div class="grids">
+                  <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+                </div>
+              </div>
+            </div>
+            <div class="children">
+              <div class="row" v-for="child in p.children" :key="'child-' + child.pName">
+                <div class="td">{{ child.pName }}</div>
+                <div class="td">{{ child.startTime }}</div>
+                <div class="td">{{ child.endTime }}</div>
+                <div class="td" v-for="date in dates" :key="date + 'grid-date'">
+                  <div class="grids">
+                    <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -53,7 +67,15 @@ export default {
     return {
       dates: ['2020/04', '2020/05'],
       projects: [
-        { pName: '地基与基础工程', startTime: '2020/04', endTime: '2020/05' },
+        {
+          pName: '地基与基础工程',
+          startTime: '2020/04',
+          endTime: '2020/05',
+          children: [
+            { pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' },
+            { pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' }
+          ]
+        },
         { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
         { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
       ]
@@ -97,46 +119,40 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.row() {
-  .row {
-    display: flex;
-    .td {
-      box-sizing: border-box;
-      &:nth-child(1) {
-        padding-left: 40px;
-        width: 200px;
-      }
-      &:not(:nth-child(1)) {
-        width: 100px;
-        text-align: center;
-      }
-      &:nth-child(n + 4) {
-        width: 400px;
-      }
-    }
-  }
-}
-
 .gantt-chart {
   .table {
     .thead {
       background-color: #163549;
       border-bottom: 1px solid #234d5f;
-      .row();
-      .td {
-        height: 42px;
-        line-height: 42px;
-        .date {
-          line-height: 21px;
-          border-left: 1px solid #234d5f;
-          .month {
-            border-bottom: 1px solid #234d5f;
-          }
-          .days {
-            display: flex;
-            .day {
-              flex: 1;
+      .row {
+        display: flex;
+        .td {
+          box-sizing: border-box;
+          height: 42px;
+          line-height: 42px;
+          .date {
+            line-height: 21px;
+            border-left: 1px solid #234d5f;
+            .month {
+              border-bottom: 1px solid #234d5f;
             }
+            .days {
+              display: flex;
+              .day {
+                flex: 1;
+              }
+            }
+          }
+          &:nth-child(1) {
+            padding-left: 40px;
+            width: 200px;
+          }
+          &:not(:nth-child(1)) {
+            width: 100px;
+            text-align: center;
+          }
+          &:nth-child(n + 4) {
+            width: 400px;
           }
         }
       }
@@ -144,22 +160,65 @@ export default {
     .tbody {
       background-color: #0a1b2f;
       border-left: 1px solid #234d5f;
-      .row();
-      .td {
-        height: 40px;
-        line-height: 40px;
-        font-size: 14px;
-        border-right: 1px solid #234d5f;
-        border-bottom: 1px solid #234d5f;
-        .grids {
-          height: 100%;
+      .row-groups {
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          left: 26px;
+          top: 16px;
+          width: 0;
+          height: 0;
+          border-top: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-bottom: 4px solid transparent;
+          border-left: 4px solid #5be1f4;
+        }
+        &.open::before {
+          border-left-color: transparent;
+          border-top-color: #5be1f4;
+        }
+        > .row .td:first-child {
+          cursor: pointer;
+        }
+        .row {
           display: flex;
-          .grid {
-            flex: 1;
-            height: 100%;
-            &:not(:last-child) {
-              border-right: 1px solid #234d5f;
+          .td {
+            box-sizing: border-box;
+            height: 42px;
+            line-height: 42px;
+            border-right: 1px solid #234d5f;
+            border-bottom: 1px solid #234d5f;
+            .grids {
+              height: 100%;
+              display: flex;
+              .grid {
+                flex: 1;
+                height: 100%;
+                &:not(:last-child) {
+                  border-right: 1px solid #234d5f;
+                }
+              }
             }
+            &:nth-child(1) {
+              padding-left: 40px;
+              width: 200px;
+            }
+            &:not(:nth-child(1)) {
+              width: 100px;
+              font-size: 14px;
+              text-align: center;
+            }
+            &:nth-child(n + 4) {
+              width: 400px;
+            }
+          }
+        }
+        .children {
+          .td {
+            height: 38px;
+            line-height: 38px;
+            font-size: 14px;
           }
         }
       }

From 18b1a8fdddb872f147509b0b8631260cb08f4c3d Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 11:23:11 +0800
Subject: [PATCH 3/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E5=86=85=E5=B1=82=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=B1=95=E5=BC=80=E5=85=B3=E9=97=AD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 1e2a955d..d135be09 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -20,9 +20,9 @@
           </div>
         </div>
         <div class="tbody">
-          <div class="row-groups open" v-for="p in projects" :key="p.pName">
+          <div class="row-groups" :class="{ open: openedIndex === i }" v-for="(p, i) in projects" :key="p.pName">
             <div class="row">
-              <div class="td">{{ p.pName }}</div>
+              <div class="td" @click="handleOpen(i)">{{ p.pName }}</div>
               <div class="td">{{ p.startTime }}</div>
               <div class="td">{{ p.endTime }}</div>
               <div class="td" v-for="date in dates" :key="date + 'grid-date'">
@@ -78,7 +78,8 @@ export default {
         },
         { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
         { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
-      ]
+      ],
+      openedIndex: 9999
     }
   },
   methods: {
@@ -113,6 +114,13 @@ export default {
         }
         return days
       })()
+    },
+    handleOpen(index) {
+      if (index === this.openedIndex) {
+        this.openedIndex = 9999
+      } else {
+        this.openedIndex = index
+      }
     }
   }
 }
@@ -174,11 +182,17 @@ export default {
           border-bottom: 4px solid transparent;
           border-left: 4px solid #5be1f4;
         }
-        &.open::before {
-          border-left-color: transparent;
-          border-top-color: #5be1f4;
+        &.open {
+          &::before {
+            border-left-color: transparent;
+            border-top-color: #5be1f4;
+          }
+          .children {
+            display: block;
+          }
         }
         > .row .td:first-child {
+          user-select: none;
           cursor: pointer;
         }
         .row {
@@ -215,6 +229,7 @@ export default {
           }
         }
         .children {
+          display: none;
           .td {
             height: 38px;
             line-height: 38px;

From b966a7727eb2dc0246ab3d81fc1fcaed0b327b8c Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 13:41:02 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E6=9B=B4?=
 =?UTF-8?q?=E6=94=B9=E7=94=98=E7=89=B9=E5=9B=BE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projectAdmin/jlw/planProgress/centerTop.vue      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index d135be09..839cf98e 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -65,12 +65,13 @@ export default {
   },
   data() {
     return {
-      dates: ['2020/04', '2020/05'],
+      dates: ['2020/04', '2020/05', '2020/07', '2020/08'],
       projects: [
         {
           pName: '地基与基础工程',
           startTime: '2020/04',
           endTime: '2020/05',
+          gantts: [{ startTime: '', endTime: '', status: '' }],
           children: [
             { pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' },
             { pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' }
@@ -128,16 +129,20 @@ export default {
 
 <style lang="less" scoped>
 .gantt-chart {
+  height: 100%;
   .table {
+    height: 100%;
+    overflow-x: auto;
     .thead {
-      background-color: #163549;
       border-bottom: 1px solid #234d5f;
       .row {
         display: flex;
         .td {
+          flex-shrink: 0;
           box-sizing: border-box;
           height: 42px;
           line-height: 42px;
+          background-color: #163549;
           .date {
             line-height: 21px;
             border-left: 1px solid #234d5f;
@@ -166,7 +171,6 @@ export default {
       }
     }
     .tbody {
-      background-color: #0a1b2f;
       border-left: 1px solid #234d5f;
       .row-groups {
         position: relative;
@@ -198,9 +202,11 @@ export default {
         .row {
           display: flex;
           .td {
+            flex-shrink: 0;
             box-sizing: border-box;
             height: 42px;
             line-height: 42px;
+            background-color: #0a1b2f;
             border-right: 1px solid #234d5f;
             border-bottom: 1px solid #234d5f;
             .grids {

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

---
 .../jlw/planProgress/centerTop.vue            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 839cf98e..c06b6e28 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -30,6 +30,7 @@
                   <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
                 </div>
               </div>
+              <div class="progress"></div>
             </div>
             <div class="children">
               <div class="row" v-for="child in p.children" :key="'child-' + child.pName">
@@ -41,6 +42,7 @@
                     <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
                   </div>
                 </div>
+                <div class="progress"></div>
               </div>
             </div>
           </div>
@@ -69,16 +71,16 @@ export default {
       projects: [
         {
           pName: '地基与基础工程',
-          startTime: '2020/04',
-          endTime: '2020/05',
+          startTime: '2020/04/06',
+          endTime: '2020/05/09',
           gantts: [{ startTime: '', endTime: '', status: '' }],
           children: [
             { pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' },
             { pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' }
           ]
         },
-        { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
-        { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
+        { pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
+        { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30' }
       ],
       openedIndex: 9999
     }
@@ -200,6 +202,7 @@ export default {
           cursor: pointer;
         }
         .row {
+          position: relative;
           display: flex;
           .td {
             flex-shrink: 0;
@@ -233,6 +236,14 @@ export default {
               width: 400px;
             }
           }
+          .progress {
+            flex-shrink: 0;
+            position: absolute;
+            top: calc(50% - 7px);
+            width: 20px;
+            height: 14px;
+            background: pink;
+          }
         }
         .children {
           display: none;

From 6cd08a5982b2144489b5c29d93f73c061a893743 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 15:11:08 +0800
Subject: [PATCH 6/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E6=A0=85=E6=A0=BC=20ref=20?=
 =?UTF-8?q?=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index c06b6e28..b10a1b4c 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -13,7 +13,7 @@
                   {{ date }}
                 </div>
                 <div class="days">
-                  <div class="day" v-for="day in getDays(date)" :key="day">{{ day }}</div>
+                  <div class="day" v-for="day in getDays(date)" :key="day.num">{{ day.num }}</div>
                 </div>
               </div>
             </div>
@@ -27,10 +27,10 @@
               <div class="td">{{ p.endTime }}</div>
               <div class="td" v-for="date in dates" :key="date + 'grid-date'">
                 <div class="grids">
-                  <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+                  <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="p.pName + '-' + day.date"></div>
                 </div>
               </div>
-              <div class="progress"></div>
+              <div class="progress" :style="{ left: gantt.left, width: gantt.width }" v-for="(gantt, index) in p.gantts" :key="index"></div>
             </div>
             <div class="children">
               <div class="row" v-for="child in p.children" :key="'child-' + child.pName">
@@ -39,7 +39,7 @@
                 <div class="td">{{ child.endTime }}</div>
                 <div class="td" v-for="date in dates" :key="date + 'grid-date'">
                   <div class="grids">
-                    <div class="grid" v-for="day in getDays(date)" :key="day + 'grid'"></div>
+                    <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
                   </div>
                 </div>
                 <div class="progress"></div>
@@ -65,6 +65,10 @@ export default {
   created() {
     console.log(this.getDays('2022/09'), '到')
   },
+  mounted() {
+    console.log(this.projects)
+    console.log(this.$refs, 'sdfsf')
+  },
   data() {
     return {
       dates: ['2020/04', '2020/05', '2020/07', '2020/08'],
@@ -73,10 +77,10 @@ export default {
           pName: '地基与基础工程',
           startTime: '2020/04/06',
           endTime: '2020/05/09',
-          gantts: [{ startTime: '', endTime: '', status: '' }],
+          gantts: [{ left: '420px', width: '100px', status: '' }],
           children: [
-            { pName: '无支护土方工程', startTime: '2020/04', endTime: '2020/05' },
-            { pName: '有支护土方工程', startTime: '2020/04', endTime: '2020/05' }
+            { pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/05/07' },
+            { pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08' }
           ]
         },
         { pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
@@ -108,12 +112,16 @@ export default {
       return (() => {
         const days = new Array(count)
           .fill(0)
-          .map((item, index) => index + 1)
-          .filter(item => item % 2)
+          .map((item, index) => {
+            let num = index + 1
+            let fulldate = date + (num < 10 ? '/0' + num : '/' + num)
+            return { num, date: fulldate }
+          })
+          .filter(item => item.num % 2)
         if (count === 28) {
-          days.push(28)
+          days.push({ num: 28, date: date + '/28' })
         } else if (count === 30) {
-          days.push(30)
+          days.push({ num: 30, date: date + '/30' })
         }
         return days
       })()
@@ -187,6 +195,7 @@ export default {
           border-right: 4px solid transparent;
           border-bottom: 4px solid transparent;
           border-left: 4px solid #5be1f4;
+          z-index: 99;
         }
         &.open {
           &::before {

From 08ef44cf8bbe509e34e01208edba47ec9ba1aab6 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 18:34:00 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E5=B7=A6=E5=81=8F=E7=A7=BB=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index b10a1b4c..972328d7 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -66,12 +66,11 @@ export default {
     console.log(this.getDays('2022/09'), '到')
   },
   mounted() {
-    console.log(this.projects)
-    console.log(this.$refs, 'sdfsf')
+    this.getGantts()
   },
   data() {
     return {
-      dates: ['2020/04', '2020/05', '2020/07', '2020/08'],
+      dates: ['2020/03', '2020/04', '2020/05', '2020/07', '2020/08'],
       projects: [
         {
           pName: '地基与基础工程',
@@ -90,6 +89,26 @@ export default {
     }
   },
   methods: {
+    getGantts() {
+      this.projects.map(project => {
+        let { startTime, pName, gantts } = project
+        const dateArr = startTime.split('/')
+        let startRef = null
+
+        if (!(dateArr[2] % 2)) {
+          const day = dateArr[2] - 1
+          dateArr[2] = day < 10 ? '0' + day : day
+          startTime = dateArr.join('/')
+          console.log(startTime, 'xxx')
+        }
+
+        startRef = this.$refs[`${pName}-${startTime}`][0]
+        const left = startRef.offsetLeft
+        gantts[0].left = left + 'px'
+        console.log(startRef.offsetLeft, '丢雷', startTime)
+        // 设置 left
+      })
+    },
     getDays(date) {
       const year = date.split('/')[0]
       const month = +date.split('/')[1]
@@ -225,6 +244,7 @@ export default {
               height: 100%;
               display: flex;
               .grid {
+                position: relative;
                 flex: 1;
                 height: 100%;
                 &:not(:last-child) {

From 005b0cb0e66e318020d1c16190e68c052fab57cb Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Wed, 10 Aug 2022 10:09:38 +0800
Subject: [PATCH 8/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=94=98=E7=89=B9=E5=9B=BE=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 972328d7..d92bbf6f 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -70,7 +70,7 @@ export default {
   },
   data() {
     return {
-      dates: ['2020/03', '2020/04', '2020/05', '2020/07', '2020/08'],
+      dates: ['2020/03', '2020/04', '2020/05', '2020/06', '2020/07', '2020/08'],
       projects: [
         {
           pName: '地基与基础工程',
@@ -91,21 +91,38 @@ export default {
   methods: {
     getGantts() {
       this.projects.map(project => {
-        let { startTime, pName, gantts } = project
-        const dateArr = startTime.split('/')
+        let { startTime, endTime, pName, gantts } = project
+        const startArr = startTime.split('/')
+        const endArr = endTime.split('/')
         let startRef = null
+        let endRef = null
 
-        if (!(dateArr[2] % 2)) {
-          const day = dateArr[2] - 1
-          dateArr[2] = day < 10 ? '0' + day : day
-          startTime = dateArr.join('/')
+        if (!(startArr[2] % 2)) {
+          const day = startArr[2] - 1
+          startArr[2] = day < 10 ? '0' + day : day
+          startTime = startArr.join('/')
           console.log(startTime, 'xxx')
         }
+        if (!(endArr[2] % 2)) {
+          const day = endArr[2] - 1
+          endArr[2] = day < 10 ? '0' + day : day
+          endTime = endArr.join('/')
+          console.log(endTime, 'xxx')
+        }
 
         startRef = this.$refs[`${pName}-${startTime}`][0]
-        const left = startRef.offsetLeft
-        gantts[0].left = left + 'px'
-        console.log(startRef.offsetLeft, '丢雷', startTime)
+        const startLeft = startRef.offsetLeft
+
+        endRef = this.$refs[`${pName}-${endTime}`][0]
+        const endWidth = endRef.offsetWidth
+        const endLeft = endRef.offsetLeft
+        const ganttWidth = endLeft - startLeft + endWidth
+
+        if (gantts) {
+          gantts[0].left = startLeft + 'px'
+          gantts[0].width = ganttWidth + 'px'
+        }
+        console.log(startLeft, ganttWidth, '丢雷', `${pName}-${endTime}`)
         // 设置 left
       })
     },

From d5a71a2877f84945d5c1b9008ccff4fd49d6493a Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Wed, 10 Aug 2022 11:01:07 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E6=B9=96=E9=87=8C=E5=A4=A7=E5=B1=8F(?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E8=AE=A1=E5=88=92)=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=A4=96=E5=B1=82=E7=94=98=E7=89=B9=E5=9B=BE=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../jlw/planProgress/centerTop.vue            | 90 +++++++++++--------
 1 file changed, 52 insertions(+), 38 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index d92bbf6f..b20e8119 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -42,7 +42,12 @@
                     <div class="grid" v-for="day in getDays(date)" :key="'grid' + day.num" :ref="child.pName + '-' + day.date"></div>
                   </div>
                 </div>
-                <div class="progress"></div>
+                <div
+                  class="progress"
+                  :style="{ left: gantt.left, width: gantt.width }"
+                  v-for="(gantt, index) in child.gantts"
+                  :key="index"
+                ></div>
               </div>
             </div>
           </div>
@@ -66,7 +71,7 @@ export default {
     console.log(this.getDays('2022/09'), '到')
   },
   mounted() {
-    this.getGantts()
+    this.setGantts()
   },
   data() {
     return {
@@ -76,55 +81,64 @@ export default {
           pName: '地基与基础工程',
           startTime: '2020/04/06',
           endTime: '2020/05/09',
-          gantts: [{ left: '420px', width: '100px', status: '' }],
+          gantts: [],
+          // gantts: [{ left: '420px', width: '100px', status: '' }],
           children: [
-            { pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/05/07' },
-            { pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08' }
+            { pName: '无支护土方工程', startTime: '2020/04/06', endTime: '2020/04/09', gantts: [] },
+            { pName: '有支护土方工程', startTime: '2020/04/10', endTime: '2020/05/08', gantts: [] }
           ]
         },
         { pName: '主体结构', startTime: '2020/03/12', endTime: '2020/06/04' },
-        { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30' }
+        { pName: '建筑装饰装修', startTime: '2020/04/21', endTime: '2020/07/30', gantts: [] }
       ],
       openedIndex: 9999
     }
   },
   methods: {
-    getGantts() {
-      this.projects.map(project => {
-        let { startTime, endTime, pName, gantts } = project
-        const startArr = startTime.split('/')
-        const endArr = endTime.split('/')
-        let startRef = null
-        let endRef = null
+    setGantts() {
+      const configGantts = projects => {
+        projects.map(project => {
+          let { startTime, endTime, pName, gantts } = project
+          const startArr = startTime.split('/')
+          const endArr = endTime.split('/')
+          let startRef = null
+          let endRef = null
 
-        if (!(startArr[2] % 2)) {
-          const day = startArr[2] - 1
-          startArr[2] = day < 10 ? '0' + day : day
-          startTime = startArr.join('/')
-          console.log(startTime, 'xxx')
-        }
-        if (!(endArr[2] % 2)) {
-          const day = endArr[2] - 1
-          endArr[2] = day < 10 ? '0' + day : day
-          endTime = endArr.join('/')
-          console.log(endTime, 'xxx')
-        }
+          if (!(startArr[2] % 2)) {
+            const day = startArr[2] - 1
+            startArr[2] = day < 10 ? '0' + day : day
+            startTime = startArr.join('/')
+            console.log(startTime, 'xxx')
+          }
+          if (!(endArr[2] % 2)) {
+            const day = endArr[2] - 1
+            endArr[2] = day < 10 ? '0' + day : day
+            endTime = endArr.join('/')
+            console.log(endTime, 'xxx')
+          }
 
-        startRef = this.$refs[`${pName}-${startTime}`][0]
-        const startLeft = startRef.offsetLeft
+          startRef = this.$refs[`${pName}-${startTime}`][0]
+          const startLeft = startRef.offsetLeft
 
-        endRef = this.$refs[`${pName}-${endTime}`][0]
-        const endWidth = endRef.offsetWidth
-        const endLeft = endRef.offsetLeft
-        const ganttWidth = endLeft - startLeft + endWidth
+          endRef = this.$refs[`${pName}-${endTime}`][0]
+          const endWidth = endRef.offsetWidth
+          const endLeft = endRef.offsetLeft
+          const ganttWidth = endLeft - startLeft + endWidth
 
-        if (gantts) {
-          gantts[0].left = startLeft + 'px'
-          gantts[0].width = ganttWidth + 'px'
-        }
-        console.log(startLeft, ganttWidth, '丢雷', `${pName}-${endTime}`)
-        // 设置 left
-      })
+          const gantt = { left: startLeft + 'px', width: ganttWidth + 'px' }
+          if (gantts) {
+            gantts.push(gantt)
+          } else {
+            project.gantts = [gantt]
+          }
+
+          console.log(startLeft, ganttWidth, '丢雷', `${pName}-${endTime}`)
+
+          // debugger
+          project.children && configGantts(project.children)
+        })
+      }
+      configGantts(this.projects)
     },
     getDays(date) {
       const year = date.split('/')[0]