parent
626c19dcb3
commit
d344efaa40
2 changed files with 94 additions and 15 deletions
@ -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> |
Loading…
Reference in new issue