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] =?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=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E7=94=98=E7=89=B9=E5=9B=BE=E5=86=85=E5=B1=82=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=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;
           }
         }
       }