add countdown component

src/components/CountDown/demo/simple.md

@@ -0,0 +1,50 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+简单的倒计时组件使用。
+
+## en-US
+
+The simplest usage.
+
+```html
+<template>
+  <div>
+    <CountDown
+      :target="new Date().getTime() + 120000"
+      :onEnd="handleCountEnd"
+      :format="newFormat"
+    />
+  </div>
+</template>
+
+<script>
+  import CountDown from "ant-design-vue-pro/CountDown";
+  export default {
+    methods: {
+      newFormat(time) {
+        const hours = 60 * 60 * 1000;
+        const minutes = 60 * 1000;
+
+        const h = Math.floor(time / hours);
+        const m = Math.floor((time - h * hours) / minutes);
+        const s = Math.floor((time - h * hours - m * minutes) / 1000);
+
+        return `${h} - ${m} - ${s}`;
+      },
+      handleCountEnd() {
+        console.log("count end");
+      }
+    },
+    components: {
+      CountDown
+    }
+  };
+</script>
+```

src/components/CountDown/index.en-US.md

@@ -0,0 +1,13 @@
+---
+title: CountDown
+---
+
+Simple CountDown Component.
+
+## API
+
+| Property | Description                   | Type           | Default |
+| -------- | ----------------------------- | -------------- | ------- |
+| format   | Formatter of time             | Function(time) |         |
+| target   | Target time                   | Date           | -       |
+| onEnd    | Countdown to the end callback | Funtion        | -       |

src/components/CountDown/index.vue

@@ -1,16 +1,29 @@
 <template>
-  <span>{{ lastTime }}</span>
+  <span>{{ realTime }}</span>
 </template>
 
 <script>
 export default {
-  props: ["target", "onEnd"],
+  props: {
+    target: null,
+    onEnd: Function,
+    format: Function
+  },
   data() {
     return {
       lastTime: this.initTime(),
       timer: null
     };
   },
+  mounted() {
+    this.tick();
+  },
+  computed: {
+    realTime() {
+      const format = this.format ? this.format : this.defaultFormat;
+      return format(this.lastTime);
+    }
+  },
   methods: {
     fixedZero(val) {
       return val * 1 < 10 ? `0${val}` : val;
@@ -29,6 +42,31 @@ export default {
       }
       lastTime = targetTime - new Date().getTime();
       return lastTime < 0 ? 0 : lastTime;
+    },
+    tick() {
+      const interval = 1000;
+      this.timer = setTimeout(() => {
+        if (this.lastTime < interval) {
+          clearTimeout(this.timer);
+          this.lastTime = 0;
+          if (this.onEnd) {
+            this.onEnd();
+          }
+        } else {
+          this.lastTime -= interval;
+          this.tick();
+        }
+      }, interval);
+    },
+    defaultFormat(time) {
+      const hours = 60 * 60 * 1000;
+      const minutes = 60 * 1000;
+
+      const h = Math.floor(time / hours);
+      const m = Math.floor((time - h * hours) / minutes);
+      const s = Math.floor((time - h * hours - m * minutes) / 1000);
+
+      return `${this.fixedZero(h)}:${this.fixedZero(m)}:${this.fixedZero(s)}`;
     }
   }
 };

src/components/CountDown/index.zh-CN.md

@@ -0,0 +1,14 @@
+---
+title: CountDown
+subtitle: 倒计时
+---
+
+倒计时组件。
+
+## API
+
+| 参数   | 说明           | 类型           | 默认值 |
+| ------ | -------------- | -------------- | ------ |
+| format | 时间格式化显示 | Function(time) |        |
+| target | 目标时间       | Date           | -      |
+| onEnd  | 倒计时结束回调 | Funtion        | -      |

src/views/Dashboard/Analysis.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <CountDown :target="new Date().getTime() + 3900000" />
     {{ $t("message")["app.dashboard.analysis.timeLabel"] }} :
     <a-date-picker></a-date-picker>
     <Chart :option="chartOption" style="height: 400px" />
@@ -11,7 +10,6 @@
 <script>
 import request from "../../utils/request";
 import Chart from "../../components/Chart";
-import CountDown from "../../components/CountDown";
 import chartCode from "!!raw-loader!../../components/Chart";
 export default {
   data() {
@@ -57,8 +55,7 @@ export default {
     clearInterval(this.interval);
   },
   components: {
-    Chart,
-    CountDown
+    Chart
   }
 };
 </script>