iczer
7 years ago
parent
94a8a66759
commit
6d0488f775
6 changed files with 456 additions and 12 deletions
@ -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> |
||||
@ -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> |
||||
@ -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> |
||||
Loading…
Reference in new issue