add chart

src/components/ChartCard.vue

@@ -0,0 +1,82 @@
+<template>
+    <a-card :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+        <div class="chart-card-header">
+            <div class="meta">
+                <span class="chart-card-title">{{ title }}</span>
+                <span class="chart-card-action">
+        <slot name="action"></slot>
+      </span>
+            </div>
+            <div class="total"><span>{{ total }}</span></div>
+        </div>
+        <div class="chart-card-content">
+            <div class="content-fix">
+                <slot></slot>
+            </div>
+        </div>
+        <div class="chart-card-footer">
+            <slot name="footer"></slot>
+        </div>
+    </a-card>
+</template>
+
+<script>
+  export default {
+    name: "ChartCard",
+    props: ['title', 'total']
+  }
+</script>
+
+<style lang="scss" scoped>
+    .chart-card-header{
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+
+        .meta{
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            color: rgba(0,0,0,.45);
+            font-size: 14px;
+            line-height: 22px;
+        }
+    }
+    .chart-card-action{
+        cursor: pointer;
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+    .chart-card-footer{
+        border-top: 1px solid #e8e8e8;
+        padding-top: 9px;
+        margin-top: 8px;
+    }
+    .chart-card-content{
+        margin-bottom: 12px;
+        position: relative;
+        height: 46px;
+        width: 100%;
+
+        .content-fix{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    }
+
+    .total {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        white-space: nowrap;
+        color: #000;
+        margin-top: 4px;
+        margin-bottom: 0;
+        font-size: 30px;
+        line-height: 38px;
+        height: 38px;
+    }
+</style>

src/components/LayoutContent.vue

@@ -0,0 +1,30 @@
+<template>
+    <a-layout-content class="layout-content">
+        <div style="margin: -24px -24px 0px;" v-if="!$route.meta.hideHeader">
+
+            <!-- pageHeader , route meta hideHeader:true on hide -->
+            <s-page-header></s-page-header>
+            <s-route-view></s-route-view>
+        </div>
+
+        <s-route-view v-else></s-route-view>
+
+    </a-layout-content>
+</template>
+
+<script>
+  import PageHeader from './PageHeader'
+  import RouteView from './RouteView'
+
+  export default {
+    name: "LayoutContent",
+    components: {
+      "s-page-header": PageHeader,
+      "s-route-view": RouteView
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/PageHeader.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="pageHeader">
+
+        <s-breadcrumb></s-breadcrumb>
+
+        <div class="detail">
+            <div class="main">
+                <div class="row">
+                    <h1 class="title" v-text="$route.meta.title"></h1>
+                </div>
+                <div class="row"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  import Breadcrumb from '@/components/Breadcrumb'
+
+  export default {
+    name: "PageHeader",
+    components: {
+      "s-breadcrumb": Breadcrumb
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/RouteView.vue

@@ -0,0 +1,16 @@
+<template>
+    <keep-alive v-if="$route.meta.keepAlive">
+        <router-view></router-view>
+    </keep-alive>
+    <router-view v-else></router-view>
+</template>
+
+<script>
+  export default {
+    name: "RouteView"
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/MiniArea.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="antv-mini-chart">
+        <div class="chart-content" :style="{ height: 46 }">
+            <v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
+                <v-tooltip />
+                <v-smooth-area position="x*y" />
+            </v-chart>
+        </div>
+    </div>
+</template>
+
+<script>
+  import moment from 'moment'
+  const data = []
+  const beginDay = new Date().getTime()
+  const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
+  for (let i = 0; i < fakeY.length; i += 1) {
+    data.push({
+      x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+      y: fakeY[i]
+    })
+  }
+  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: "MiniArea",
+    data () {
+      return {
+        data,
+        scale,
+        tooltip,
+        height: 100
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+    .antv-mini-chart {
+        position: relative;
+        width: 100%;
+
+        .chart-content {
+            position: absolute;
+            bottom: -28px;
+            width: 100%;
+            margin: 0 -5px;
+            overflow: hidden;
+        }
+    }
+</style>

src/components/menu/SiderMenu.vue

@@ -6,7 +6,7 @@
                 <h1>Ant Design Pro</h1>
             </router-link>
         </div>
-        <s-menu :collapsed="collapsed" :menu="menus" @select="onSelect"></s-menu>
+        <s-menu :collapsed="collapsed" :menu="menus" @select="onSelect" style="padding: 16px 0px;"></s-menu>
     </a-layout-sider>
 </template>
 

src/main.js

@@ -6,12 +6,15 @@ import store from './store/'
 import { VueAxios } from "@/utils/request"
 
 import AntDesign from 'ant-design-vue'
+import Viser from 'viser-vue'
 import 'ant-design-vue/dist/antd.css';  // or 'ant-design-vue/dist/antd.less'
 
+
 import '@/permission' // permission control
 
 Vue.use(AntDesign)
 Vue.use(VueAxios, router)
+Vue.use(Viser)
 
 Vue.config.productionTip = false
 

src/views/Layout.vue

@@ -7,46 +7,23 @@
             <!-- layout header -->
             <s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
             <!-- layout content -->
-            <a-layout-content class="layout-content">
-                <div style="margin: -24px -24px 0px;">
-                    <!-- pageHeader , route meta hideHeader:true on hide -->
-                    <div class="pageHeader" v-if="!$route.meta.hideHeader">
-
-                        <s-breadcrumb></s-breadcrumb>
-
-                        <div class="detail">
-                            <div class="main">
-                                <div class="row">
-                                    <h1 class="title" v-text="$route.meta.title"></h1>
-                                </div>
-                                <div class="row"></div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <keep-alive v-if="$route.meta.keepAlive">
-                        <router-view></router-view>
-                    </keep-alive>
-                    <router-view v-else></router-view>
-                </div>
-            </a-layout-content>
+            <s-layout-content></s-layout-content>
         </a-layout>
     </a-layout>
 </template>
 
 <script>
-// import NavMenu from '@/components/NavMenu'
 import SiderMenu from '@/components/menu/SiderMenu'
-import Breadcrumb from '@/components/Breadcrumb'
 import LayoutHeader from '@/components/LayoutHeader'
+import LayoutContent from '@/components/LayoutContent'
 import { asyncRouterMap } from '@/router/index'
 
 export default {
   name: "Layout",
   components: {
     "s-sider-menu": SiderMenu,
-    "s-breadcrumb": Breadcrumb,
-    "s-layout-header": LayoutHeader
+    "s-layout-header": LayoutHeader,
+    "s-layout-content": LayoutContent
   },
   data() {
     return {

src/views/Login.vue

@@ -132,7 +132,7 @@
           },
           handleTabClick(key) {
               this.customActiveKey = key
-              this.form.resetFields()
+              // this.form.resetFields()
           },
           handleSubmit() {
               let flag = false

src/views/dashboard/Analysis.vue

@@ -1,12 +1,95 @@
 <template>
     <div>
-        Analysis
+        <a-row :gutter="24">
+            <a-col :sm="24" :md="12" :xl="6">
+                <chart-card title="总销售额" total="￥126,560">
+                    <a-tooltip title="指标说明" slot="action">
+                        <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>
+                    </div>
+                    <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+                </chart-card>
+            </a-col>
+            <a-col :sm="24" :md="12" :xl="6">
+                <chart-card title="总销售额" total="￥126,560">
+                    <a-tooltip title="指标说明" slot="action">
+                        <a-icon type="info-circle-o" />
+                    </a-tooltip>
+                    <div>
+                        <mini-area />
+                    </div>
+                    <div slot="footer">日均销售额<span>￥ 234.56</span></div>
+                </chart-card>
+            </a-col>
+            <a-col :sm="24" :md="12" :xl="6">
+                <chart-card title="总销售额" total="￥126,560">
+                    <a-tooltip title="指标说明" slot="action">
+                        <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>
+                    </div>
+                    <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+                </chart-card>
+            </a-col>
+            <a-col :sm="24" :md="12" :xl="6">
+                <chart-card title="总销售额" total="￥126,560">
+                    <a-tooltip title="指标说明" slot="action">
+                        <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>
+                    </div>
+                    <div slot="footer">日均销售额      <span>￥ 234.56</span></div>
+                </chart-card>
+            </a-col>
+        </a-row>
     </div>
 </template>
 
 <script>
+  import ChartCard from '@/components/ChartCard'
+  import ACol from "ant-design-vue/es/grid/Col"
+  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
+  import MiniArea from '@/components/chart/MiniArea'
+
   export default {
-    name: "Analysis"
+    name: "Analysis",
+    components: {
+      ATooltip,
+      ACol,
+      ChartCard,
+      MiniArea
+    }
   }
 </script>