From 94a8a667592967fb37f2bf7407d7595ad8c72686 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Sat, 21 Jul 2018 21:46:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Etab=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                              |  5 +-
 src/components/chart/Bar.vue           | 53 ++++++++++++++++++++
 src/components/dashboard/Dashboard.vue | 67 ++++++++++++++++++++++++--
 3 files changed, 120 insertions(+), 5 deletions(-)
 create mode 100644 src/components/chart/Bar.vue

diff --git a/README.md b/README.md
index 5ea6698..72dd720 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 # vue-antd-admin
-Ant Design Pro 的 Vue 实现（非官方）
+**Ant Design Pro 的 Vue 实现（非官方）**
+一个开箱即用的中后台前端/设计解决方案
 
-[预览地址](https://iczer.github.io)
\ No newline at end of file
+[预览地址](https://iczer.github.io)（开发中...）
diff --git a/src/components/chart/Bar.vue b/src/components/chart/Bar.vue
new file mode 100644
index 0000000..dfed6d7
--- /dev/null
+++ b/src/components/chart/Bar.vue
@@ -0,0 +1,53 @@
+<template>
+  <div >
+    <h4>{{title}}</h4>
+    <v-chart :force-fit="true" height="251" :data="data">
+      <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>
+
+<style scoped>
+
+</style>
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue
index 3f6adc3..14f522d 100644
--- a/src/components/dashboard/Dashboard.vue
+++ b/src/components/dashboard/Dashboard.vue
@@ -51,10 +51,43 @@
           <div>
             <mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
           </div>
-          <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+          <div slot="footer">日均销售额  <span>￥ 234.56</span></div>
         </chart-card>
       </a-col>
     </a-row>
+    <a-card :bordered="false" :body-style="{padding: '24px'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrap" 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">
+                123
+              </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">
+              123
+            </a-col>
+          </a-row></a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
   </div>
 </template>
 
@@ -68,12 +101,40 @@ import AIcon from 'vue-antd-ui/es/icon/icon'
 import MiniArea from '../chart/MiniArea'
 import MiniBar from '../chart/MiniBar'
 import MiniProgress from '../chart/MiniProgress'
+import ATabs from 'vue-antd-ui/es/tabs'
+import ADatePicker from 'vue-antd-ui/es/date-picker'
+import Bar from "../chart/Bar";
+
+const ATabPane = ATabs.TabPane
+const ARangePicker = ADatePicker.RangePicker
 export default {
   name: 'dashboard',
-  components: {MiniProgress, MiniBar, MiniArea, AIcon, ATooltip, ChartCard, ACard, ARow, ACol}
+  components: {
+    Bar,
+    ARangePicker,
+    ATabPane,
+    ATabs,
+    MiniProgress,
+    MiniBar,
+    MiniArea,
+    AIcon,
+    ATooltip,
+    ChartCard,
+    ACard,
+    ARow,
+    ACol}
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+  .extra-wrap{
 
+  }
+  .extra-item{
+    display: inline-block;
+    margin-right: 24px;
+    a{
+      margin-left: 24px;
+    }
+  }
 </style>