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

src/views/projectAdmin/jlw/planProgress/centerTop.vue

@@ -1,42 +1,169 @@
 <template>
-<!-- 甘特图 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
+  <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" 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>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
 export default {
-
+  components: { Card },
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: ''
     }
   },
+  created() {
+    console.log(this.getDays('2022/09'), '到')
+  },
   data() {
     return {
-
-    };
+      dates: ['2020/04', '2020/05'],
+      projects: [
+        { pName: '地基与基础工程', startTime: '2020/04', endTime: '2020/05' },
+        { pName: '主体结构', startTime: '2020/03', endTime: '2020/06' },
+        { pName: '建筑装饰装修', startTime: '2020/04', endTime: '2020/07' }
+      ]
+    }
   },
+  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>
-.container {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
+.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;
+      }
+    }
+  }
+}
 
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
+.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 {
+          height: 100%;
+          display: flex;
+          .grid {
+            flex: 1;
+            height: 100%;
+            &:not(:last-child) {
+              border-right: 1px solid #234d5f;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>
-