From a5ab7ab756c2705d6fb50e42367fc85699d71787 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Mon, 8 Aug 2022 14:27:21 +0800
Subject: [PATCH 1/2] =?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=E7=AE=80?=
 =?UTF-8?q?=E5=8C=96=E7=94=98=E7=89=B9=E5=9B=BE=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../planProgress/centerTop.vue                | 37 +++++--------------
 1 file changed, 9 insertions(+), 28 deletions(-)

diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
index 211cf33c..a6ef3884 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/planProgress/centerTop.vue
@@ -1,42 +1,23 @@
 <template>
-<!-- 甘特图 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</div>
+  <Card :title="title">
+    甘特图
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
 export default {
-
+  components: { Card },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
   data() {
-    return {
-
-    };
-  },
-
-
+    return {}
+  }
 }
 </script>
 
-<style lang="less" scoped>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-}
-</style>
-
+<style lang="less" scoped></style>

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 2/2] =?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=E5=B8=83?=
 =?UTF-8?q?=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>