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