增加模拟数据

package-lock.json

@@ -4000,6 +4000,11 @@
       "integrity": "sha1-6vQ5/U1ISK105cx9vvIAZyueNFs=",
       "dev": true
     },
+    "dayjs": {
+      "version": "1.7.4",
+      "resolved": "http://r.cnpmjs.org/dayjs/download/dayjs-1.7.4.tgz",
+      "integrity": "sha1-YAEnc3KuyDAhlDFX+ieezytfXPg="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "http://r.cnpmjs.org/de-indent/download/de-indent-1.0.2.tgz",
@@ -5838,8 +5843,7 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -5849,8 +5853,7 @@
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5967,8 +5970,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5980,7 +5982,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6106,8 +6107,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6240,7 +6240,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",

package.json

@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "dayjs": "^1.7.4",
     "vue": "^2.5.16"
   },
   "devDependencies": {

src/App.vue

@@ -1,29 +1,54 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <gantt></gantt>
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-import HelloWorld from "./components/HelloWorld.vue";
+import Gantt from "./components/Gantt.vue";
 
 export default Vue.extend({
   name: "app",
   components: {
-    HelloWorld
+    Gantt
+  },
+  data() {
+    return {
+      header: {
+        info: {
+          columns: [
+            {
+              field: "orderNo",
+              display: "订单号"
+            },
+            {
+              filed: "processName",
+              display: "工序"
+            }
+          ],
+          groupBy: ["orderNo"]
+        },
+        time: {
+          start: "2018-07-01",
+          end: "2018-08-31",
+          groupBy: ["year", "month", "day"]
+        }
+      },
+      task: {
+        info: {
+          orderNo: "订单1",
+          processName: "工序1"
+        },
+        time: {
+          start: "2018-08-01",
+          end: "2018-08-10"
+        }
+      }
+    };
   }
 });
 </script>
 
 <style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/components/Gantt.vue

@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <!-- <table class="gantt">
+            <thead>
+                <tr>
+                    <td v-for="i in chartHead" :key="i">{{i}}</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in data" :key="item">
+                    <td v-for="i in chartHead" :key="i" :style="{
+                        backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
+                    }">&nbsp;</td>
+                </tr>
+            </tbody>
+        </table> -->
+        <table class="gantt">
+            <thead>
+                <tr>
+                    <td v-for="i in chartHead" :key="i">{{i}}</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in data" :key="item">
+                    <td v-for="i in chartHead" :key="i" :style="{
+                        backgroundColor: i>=item.begin&&i<=item.end ?'red':'white'
+                    }">&nbsp;</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import dayjs from "dayjs";
+
+console.log(dayjs().daysInMonth());
+
+export default Vue.extend({
+  props: {},
+  data() {
+    return {
+      tableHead: [],
+      chartHead: [1, 2, 3, 5, 6],
+      data: [{ begin: 2, end: 5 }, { begin: 1, end: 3 }, { begin: 2, end: 5 }]
+    };
+  }
+});
+</script>
+<style lang="scss" scoped>
+$border: 1px solid black;
+table.gantt {
+  border-spacing: 0;
+  border: $border;
+  border-bottom: 0;
+  td {
+    border-bottom: $border;
+  }
+  thead td + td {
+    border-left: $border;
+  }
+  td + td {
+    border-bottom: $border;
+  }
+}
+</style>
+

tests/unit/HelloWorld.spec.ts

@@ -3,7 +3,8 @@ import HelloWorld from "@/components/HelloWorld.vue";
 
 describe("HelloWorld.vue", () => {
   it("renders props.msg when passed", () => {
-    const msg = "new message";
+    const msg: string = "new message";
+    // tslint:disable-next-line:typedef
     const wrapper = shallowMount(HelloWorld, {
       propsData: { msg }
     });