From d344efaa400e441eefa80bb0e4a5435e4d6c2e5d Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Mon, 10 Sep 2018 16:14:58 +0800
Subject: [PATCH] feat: add trend components

---
 src/components/chart/Trend.vue         | 82 ++++++++++++++++++++++++++
 src/components/dashboard/Dashboard.vue | 27 ++++-----
 2 files changed, 94 insertions(+), 15 deletions(-)
 create mode 100644 src/components/chart/Trend.vue

diff --git a/src/components/chart/Trend.vue b/src/components/chart/Trend.vue
new file mode 100644
index 0000000..bcbfa55
--- /dev/null
+++ b/src/components/chart/Trend.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="chart-trend">
+    {{term}}
+    <span>{{rate}}%</span>
+    <span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
+  </div>
+</template>
+
+<script>
+import AIcon from 'ant-design-vue/es/icon/icon'
+export default {
+  name: 'Trend',
+  components: {AIcon},
+  props: {
+    term: {
+      type: String,
+      required: true
+    },
+    target: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    value: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    isIncrease: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    percent: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    scale: {
+      type: Number,
+      required: false,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: this.isIncrease ? 'up' : 'down',
+      rate: this.percent
+    }
+  },
+  created () {
+    this.trend = this.caulateTrend()
+    this.rate = this.caulateRate()
+  },
+  methods: {
+    caulateRate () {
+      return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
+    },
+    caulateTrend () {
+      let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
+      return isIncrease ? 'up' : 'down'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend{
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+    .chart-trend-icon{
+      font-size: 12px;
+      &.up{
+        color: #f5222d;
+      }
+      &.down{
+        color: #52c41a;
+      }
+    }
+  }
+</style>
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
index 1e276f9..87df5c8 100644
--- a/src/components/dashboard/Dashboard.vue
+++ b/src/components/dashboard/Dashboard.vue
@@ -7,18 +7,10 @@
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
-            <div style="display: inline-block; font-size: 14px; line-height: 22px; margin-right: 16px">
-              同周比
-              <span>12%</span>
-              <span style="color: #f5222d; font-size: 12px"><a-icon type="caret-up" /></span>
-            </div>
-            <div style="display: inline-block; font-size: 14px; line-height: 22px;">
-              日环比
-              <span>11%</span>
-              <span style="color: #52c41a; font-size: 12px"><a-icon type="caret-down" /></span>
-            </div>
+            <trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
+            <trend term="日环比" :target="100" :value="89" :scale="0" />
           </div>
-          <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+          <div slot="footer">日均销售额<span> ￥234.56</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
@@ -29,7 +21,7 @@
           <div>
             <mini-area />
           </div>
-          <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+          <div slot="footer">日访问量<span> 123,4</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
@@ -40,18 +32,21 @@
           <div>
             <mini-bar />
           </div>
-          <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+          <div slot="footer">转化率 <span>60%</span></div>
         </chart-card>
       </a-col>
       <a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
-        <chart-card title="营销活动说明" total="73%">
+        <chart-card title="运营活动效果" total="73%">
           <a-tooltip title="指标说明" slot="action">
             <a-icon type="info-circle-o" />
           </a-tooltip>
           <div>
             <mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
           </div>
-          <div slot="footer">日均销售额  <span>￥ 234.56</span></div>
+          <div slot="footer">
+            <trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
+            <trend term="日环比" :target="100" :value="89" :scale="0" />
+          </div>
         </chart-card>
       </a-col>
     </a-row>
@@ -122,6 +117,7 @@ import Bar from '../chart/Bar'
 import RankingList from '../chart/RankingList'
 import HotSearch from '../analysis/HotSearch'
 import SalesData from '../analysis/SalesData'
+import Trend from '../chart/Trend'
 
 const rankList = []
 
@@ -142,6 +138,7 @@ export default {
     }
   },
   components: {
+    Trend,
     SalesData,
     HotSearch,
     RankingList,