From d69ab6633a3fc539d47f7ece37a9ab55d1fee6be Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Mon, 8 Aug 2022 19:11:06 +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=A4=96=E5=B1=82=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../planProgress/centerTop.vue                | 146 +++++++++++++++++-
 1 file changed, 143 insertions(+), 3 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
index a6ef3884..bcf06905 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
@@ -1,6 +1,38 @@
 <template>
   <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">
+            <div class="td">地基与基础工程</div>
+            <div class="td">2022/08/08</div>
+            <div class="td">2022/08/08</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'">{{ day }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
@@ -14,10 +46,118 @@ export default {
       default: ''
     }
   },
+  created() {
+    console.log(this.getDays('2022/09'), '到')
+  },
   data() {
-    return {}
+    return {
+      dates: ['2020/04', '2020/05']
+    }
+  },
+  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></style>
+<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;
+            }
+          }
+        }
+      }
+    }
+    .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 {
+          display: flex;
+          .grid {
+            flex: 1;
+            height: 100%;
+            &:not(:last-child) {
+              border-right: 1px solid #234d5f;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>