湖里大屏(进度计划)：完成甘特图外层布局

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>