blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 19:41:37 +08:00
Code Issues Projects Releases Wiki Activity

feat: add trend components

Browse Source
This commit is contained in:
chenghx 2018-09-10 16:14:58 +08:00
parent 626c19dcb3
commit d344efaa40
2 changed files with 94 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/chart/Trend.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div class="chart-trend">
{{term}}
<span>{{rate}}%</span>
<span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
</div>
</template>
<script>
import AIcon from 'ant-design-vue/es/icon/icon'
export default {
name: 'Trend',
components: {AIcon},
props: {
term: {
type: String,
required: true
},
target: {
type: Number,
required: false,
default: 0
},
value: {
type: Number,
required: false,
default: 0
},
isIncrease: {
type: Boolean,
required: false,
default: null
},
percent: {
type: Number,
required: false,
default: null
},
scale: {
type: Number,
required: false,
default: 2
}
},
data () {
return {
trend: this.isIncrease ? 'up' : 'down',
rate: this.percent
}
},
created () {
this.trend = this.caulateTrend()
this.rate = this.caulateRate()
},
methods: {
caulateRate () {
return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
},
caulateTrend () {
let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
return isIncrease ? 'up' : 'down'
}
}
}
</script>
<style lang="less" scoped>
.chart-trend{
display: inline-block;
font-size: 14px;
line-height: 22px;
.chart-trend-icon{
font-size: 12px;
&.up{
color: #f5222d;
}
&.down{
color: #52c41a;
}
}
}
</style>

27
src/components/dashboard/Dashboard.vue
View File

@ -7,18 +7,10 @@
<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>
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
<trend term="日环比" :target="100" :value="89" :scale="0" />
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
<div slot="footer">日均销售额<span> ￥234.56</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
@ -29,7 +21,7 @@
<div>
<mini-area />
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
<div slot="footer">日访问量<span> 123,4</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
@ -40,18 +32,21 @@
<div>
<mini-bar />
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
<div slot="footer">转化率 <span>60%</span></div>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" style="padding: 12px 12px 24px;">
<chart-card title="营销活动说明" total="73%">
<chart-card title="运营活动效果" total="73%">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-progress target="90" percent="78" color="#13C2C2" height="8px"/>
</div>
<div slot="footer">日均销售额 <span>￥ 234.56</span></div>
<div slot="footer">
<trend style="margin-right: 16px" term="同周比" :percent="12" :is-increase="true" :scale="0" />
<trend term="日环比" :target="100" :value="89" :scale="0" />
</div>
</chart-card>
</a-col>
</a-row>
@ -122,6 +117,7 @@ import Bar from '../chart/Bar'
import RankingList from '../chart/RankingList'
import HotSearch from '../analysis/HotSearch'
import SalesData from '../analysis/SalesData'
import Trend from '../chart/Trend'
const rankList = []
@ -142,6 +138,7 @@ export default {
}
},
components: {
Trend,
SalesData,
HotSearch,
RankingList,