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;
           }
         }
       }