Add dashboard

src/components/chart/Bar.vue

@@ -0,0 +1,48 @@
+<template>
+    <div :style="{ padding: '0 0 32px 32px' }">
+        <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+        <v-chart :force-fit="true" height="254" :data="data" :padding="['auto', 'auto', 40, 50]">
+            <v-tooltip />
+            <v-axis />
+            <v-bar position="x*y"/>
+        </v-chart>
+    </div>
+</template>
+
+<script>
+  const data = []
+  for (let i = 0; i < 12; i += 1) {
+    data.push({
+      x: `${i + 1}月`,
+      y: Math.floor(Math.random() * 1000) + 200
+    })
+  }
+  const tooltip = [
+    'x*y',
+    (x, y) => ({
+      name: x,
+      value: y
+    })
+  ]
+  const scale = [{
+    dataKey: 'x',
+    min: 2
+  }, {
+    dataKey: 'y',
+    title: '时间',
+    min: 1,
+    max: 22
+  }]
+
+  export default {
+    name: "Bar",
+    props: ['title'],
+    data () {
+      return {
+        data,
+        scale,
+        tooltip
+      }
+    }
+  }
+</script>

src/components/chart/RankList.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="rank">
+        <h4 class="title">{{ title }}</h4>
+        <ul class="list">
+            <li :key="index" v-for="(item, index) in list">
+                <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+                <span >{{ item.name }}</span>
+                <span >{{ item.total }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "RankList",
+    props: ['title', 'list']
+  }
+</script>
+
+<style lang="scss" scoped>
+
+    .rank {
+        padding: 0 32px 32px 72px;
+
+        .list {
+            margin: 25px 0 0;
+            padding: 0;
+            list-style: none;
+
+            li {
+                margin-top: 16px;
+
+                span {
+                    color: rgba(0, 0, 0, .65);
+                    font-size: 14px;
+                    line-height: 22px;
+
+                    &:first-child {
+                        background-color: #f5f5f5;
+                        border-radius: 20px;
+                        display: inline-block;
+                        font-size: 12px;
+                        font-weight: 600;
+                        margin-right: 24px;
+                        height: 20px;
+                        line-height: 20px;
+                        width: 20px;
+                        text-align: center;
+                    }
+                    &.active {
+                        background-color: #314659;
+                        color: #fff;
+                    }
+                    &:last-child {
+                        float: right;
+                    }
+                }
+            }
+        }
+    }
+
+</style>

src/views/dashboard/Analysis.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <a-row :gutter="24">
-            <a-col :sm="24" :md="12" :xl="6">
+            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                 <chart-card title="总销售额" total="￥126,560">
                     <a-tooltip title="指标说明" slot="action">
                         <a-icon type="info-circle-o" />
@@ -21,7 +21,7 @@
                     <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
                 </chart-card>
             </a-col>
-            <a-col :sm="24" :md="12" :xl="6">
+            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                 <chart-card title="总销售额" total="￥126,560">
                     <a-tooltip title="指标说明" slot="action">
                         <a-icon type="info-circle-o" />
@@ -32,7 +32,7 @@
                     <div slot="footer">日均销售额<span>￥ 234.56</span></div>
                 </chart-card>
             </a-col>
-            <a-col :sm="24" :md="12" :xl="6">
+            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                 <chart-card title="总销售额" total="￥126,560">
                     <a-tooltip title="指标说明" slot="action">
                         <a-icon type="info-circle-o" />
@@ -52,7 +52,7 @@
                     <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
                 </chart-card>
             </a-col>
-            <a-col :sm="24" :md="12" :xl="6">
+            <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
                 <chart-card title="总销售额" total="￥126,560">
                     <a-tooltip title="指标说明" slot="action">
                         <a-icon type="info-circle-o" />
@@ -73,6 +73,59 @@
                 </chart-card>
             </a-col>
         </a-row>
+
+        <a-card :bordered="false" :body-style="{padding: '0'}">
+            <div class="salesCard">
+                <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+                    <div class="extra-wrapper" slot="tabBarExtraContent">
+                        <div class="extra-item">
+                            <a>今日</a>
+                            <a>本周</a>
+                            <a>本月</a>
+                            <a>本年</a>
+                        </div>
+                        <a-range-picker :style="{width: '256px'}"></a-range-picker>
+                    </div>
+                    <a-tab-pane loading="true" tab="销售额" key="1">
+                        <a-row>
+                            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                                <bar title="销售额趋势" />
+                            </a-col>
+                            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                                <rank-list title="门店销售排行榜" :list="rankList"/>
+                            </a-col>
+                        </a-row>
+                    </a-tab-pane>
+                    <a-tab-pane tab="访问量" key="2"><a-row>
+                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
+                            <bar title="销售额趋势" />
+                        </a-col>
+                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
+                            <rank-list title="门店销售排行榜" :list="rankList"/>
+                        </a-col>
+                    </a-row></a-tab-pane>
+                </a-tabs>
+            </div>
+        </a-card>
+
+        <a-row :gutter="12">
+            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+                <a-card :bordered="false" title="Card Title" :style="{ marginTop: '24px' }">
+                    <a href="#" slot="extra">more</a>
+                    <p>card content</p>
+                    <p>card content</p>
+                    <p>card content</p>
+                </a-card>
+            </a-col>
+            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+                <a-card :bordered="false" title="Card Title"  :style="{ marginTop: '24px' }">
+                    <a href="#" slot="extra">more</a>
+                    <p>card content</p>
+                    <p>card content</p>
+                    <p>card content</p>
+                </a-card>
+            </a-col>
+        </a-row>
     </div>
 </template>
 
@@ -80,19 +133,49 @@
   import ChartCard from '@/components/ChartCard'
   import ACol from "ant-design-vue/es/grid/Col"
   import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
+  import ADatePicker from 'ant-design-vue/es/date-picker'
   import MiniArea from '@/components/chart/MiniArea'
+  import RankList from '@/components/chart/RankList'
+  import Bar from '@/components/chart/Bar'
+
+  const ARangePicker = ADatePicker.RangePicker
+  const rankList = []
+  for (let i = 0; i < 7; i++) {
+    rankList.push({
+      name: '桃源村' + (i+1) + '号店',
+      total: 1234.56 - i * 100
+    })
+  }
+
 
   export default {
     name: "Analysis",
     components: {
       ATooltip,
       ACol,
+      ARangePicker,
       ChartCard,
-      MiniArea
+      MiniArea,
+      RankList,
+      Bar
+    },
+    data() {
+      return {
+        rankList
+      }
     }
   }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+    .extra-wrapper {
+        line-height: 55px;
+        .extra-item{
+            display: inline-block;
+            margin-right: 24px;
+            a{
+                margin-left: 24px;
+            }
+        }
+    }
 </style>