From 477b5a8cd128907e4acde33d12608c45043a7455 Mon Sep 17 00:00:00 2001
From: Jack <1638169491@qq.com>
Date: Tue, 9 Aug 2022 09:46:11 +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=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            | 167 +++++++++++++++---
 1 file changed, 147 insertions(+), 20 deletions(-)

diff --git a/src/views/projectAdmin/jlw/planProgress/centerTop.vue b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
index 211cf33c..58ad3db7 100644
--- a/src/views/projectAdmin/jlw/planProgress/centerTop.vue
+++ b/src/views/projectAdmin/jlw/planProgress/centerTop.vue
@@ -1,42 +1,169 @@
 <template>
-<!-- 甘特图 -->
-<div class="container">
-    <div class="titleTxt">{{ title }}</div>
-
-</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>
-