新增table card、pie card

src/components/analysis/HotSearch.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="hot-search">
+    <a-row style="margin: 0 -34px">
+      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
+        <div class="num-info">
+          <span class="title">搜索用户数</span>
+          <div class="value">
+            <span class="total">12321</span>
+            <span class="subtotal">71.2<a-icon type="caret-up" /></span>
+          </div>
+        </div>
+        <mini-area style="height: 45px" />
+      </a-col>
+      <a-col style="padding: 0 34px; margin-bottom: 24px" :sm="12" :xs="24">
+        <div class="num-info">
+          <span class="title">搜索用户数</span>
+          <div class="value">
+            <span class="total">2.7</span>
+            <span class="subtotal">71.2<a-icon type="caret-down" /></span>
+          </div>
+        </div>
+        <mini-area style="height: 45px" />
+      </a-col>
+    </a-row>
+    <a-table
+      :dataSource="searchData"
+      :columns="columns" size="small"
+      :pagination="{style: { marginBottom: 0 }, pageSize: 5}"
+    >
+      <a href="#/" slot="keyword" slot-scope="text">{{text}}</a>
+      <span slot="rang" slot-scope="text">{{text}} %<a-icon type="caret-up" /> </span>
+    </a-table>
+  </div>
+</template>
+
+<script>
+import ARow from 'vue-antd-ui/es/grid/Row'
+import ACol from 'vue-antd-ui/es/grid/Col'
+import AIcon from 'vue-antd-ui/es/icon/icon'
+import MiniArea from '../chart/MiniArea'
+import ATable from 'vue-antd-ui/es/table'
+
+const searchData = []
+for (let i = 0; i < 50; i++) {
+  searchData.push({
+    index: i + 1,
+    keyword: '关键词-' + i,
+    count: Math.floor(Math.random() * 1000),
+    range: Math.floor(Math.random() * 100),
+    status: Math.floor((Math.random() * 10) % 2)
+  })
+}
+
+const columns = [
+  {
+    title: '排名',
+    dataIndex: 'index',
+    key: 'index'
+  },
+  {
+    title: '搜索关键词',
+    dataIndex: 'keyword',
+    key: 'keyword',
+    scopedSlots: {customRender: 'keyword'}
+  },
+  {
+    title: '用户数',
+    dataIndex: 'count',
+    key: 'count',
+    sorter: (a, b) => a.count - b.count
+  },
+  {
+    title: '周涨幅',
+    dataIndex: 'range',
+    key: 'range',
+    scopedSlots: {customRender: 'rang'}
+  }
+]
+
+export default {
+  name: 'HotSearch',
+  components: {ATable, MiniArea, AIcon, ARow, ACol},
+  data () {
+    return {
+      searchData,
+      columns
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .num-info{
+    .title{
+      color: rgba(0,0,0,.45);
+      font-size: 14px;
+      height: 22px;
+      line-height: 22px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+    .value{
+      .total{
+        color: rgba(0,0,0,.85);
+        display: inline-block;
+        line-height: 32px;
+        height: 32px;
+        font-size: 24px;
+        margin-right: 32px;
+      }
+      .subtotal{
+        color: rgba(0,0,0,.45);
+        font-size: 16px;
+        vertical-align: top;
+        margin-right: 0;
+        i{
+          font-size: 12px;
+          color: red;
+          transform: scale(.82);
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+</style>

src/components/analysis/SalesData.vue

@@ -0,0 +1,71 @@
+<template>
+  <div style="">
+    <a-radio-group>
+      <a-radio-button value="a">全渠道</a-radio-button>
+      <a-radio-button value="b">线上</a-radio-button>
+      <a-radio-button value="c">门店</a-radio-button>
+    </a-radio-group>
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+      <v-tooltip :showTitle="false" dataKey="item*percent" />
+      <v-axis />
+      <v-legend dataKey="item" position="right" :offsetX="-140"/>
+      <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig" />
+      <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import ARadio from 'vue-antd-ui/es/radio'
+const DataSet = require('@antv/data-set')
+
+const ARadioGroup = ARadio.Group
+const ARadioButton = ARadio.Button
+
+const sourceData = [
+  { item: '事例一', count: 40 },
+  { item: '事例二', count: 21 },
+  { item: '事例三', count: 17 },
+  { item: '事例四', count: 13 },
+  { item: '事例五', count: 9 }
+]
+
+const scale = [{
+  dataKey: 'percent',
+  min: 0,
+  formatter: '.0%'
+}]
+
+const dv = new DataSet.View().source(sourceData)
+dv.transform({
+  type: 'percent',
+  field: 'count',
+  dimension: 'item',
+  as: 'percent'
+})
+const data = dv.rows
+export default {
+  name: 'SalesData',
+  components: {ARadioGroup, ARadioButton},
+  data () {
+    return {
+      data,
+      scale,
+      height: 356,
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      },
+      labelConfig: ['percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val;
+        }
+      }]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/RankingList.vue

@@ -0,0 +1,59 @@
+<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: 'RankingList',
+  props: ['title', 'list']
+}
+</script>
+
+<style lang="less" scoped>
+  .rank{
+    padding: 0 32px 32px 72px;
+    .title{
+    }
+    .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;
+        }
+        span: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;
+        }
+        span.active {
+          background-color: #314659;
+          color: #fff;
+        }
+        span:last-child {
+          float: right;
+        }
+      }
+    }
+  }
+</style>

src/components/dashboard/Dashboard.vue

@@ -73,7 +73,7 @@
                 <bar title="销售额趋势" />
               </a-col>
               <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-                123
+                <ranking-list title="门店销售排行榜" :list="rankList"/>
               </a-col>
             </a-row>
           </a-tab-pane>
@@ -82,12 +82,27 @@
               <bar title="销售额趋势" />
             </a-col>
             <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-              123
+              <ranking-list title="门店销售排行榜" :list="rankList"/>
             </a-col>
           </a-row></a-tab-pane>
         </a-tabs>
       </div>
     </a-card>
+    <a-row style="margin: 0 -12px">
+      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-card :bordered="false" style="margin-top: 24px" title="热门搜索">
+          <hot-search />
+        </a-card>
+      </a-col>
+      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
+        <a-card :bordered="false" style="margin-top: 24px;" title="销售额占比">
+          <sales-data />
+          <div slot="extra">
+            <div>...</div>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
   </div>
 </template>
 
@@ -103,13 +118,34 @@ 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";
+import Bar from '../chart/Bar'
+import RankingList from '../chart/RankingList'
+import HotSearch from '../analysis/HotSearch'
+import SalesData from '../analysis/SalesData'
+
+
+const rankList = []
+
+for (let i = 0; i < 8; i++) {
+  rankList.push({
+    name: '桃源村' + i + '号店',
+    total: 1234.56 - i * 100
+  })
+}
 
 const ATabPane = ATabs.TabPane
 const ARangePicker = ADatePicker.RangePicker
 export default {
   name: 'dashboard',
+  data () {
+    return {
+      rankList
+    }
+  },
   components: {
+    SalesData,
+    HotSearch,
+    RankingList,
     Bar,
     ARangePicker,
     ATabPane,