inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div class="chart-trend">
3     {{ term }}
4     <span>{{ rate }}%</span>
5     <span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
6   </div>
7 </template>
8
9 <script>
10 export default {
11   name: 'Trend',
12   props: {
13     term: {
14       type: String,
15       default: '',
16       required: true
17     },
18     percentage: {
19       type: Number,
20       default: null
21     },
22     type: {
23       type: Boolean,
24       default: null
25     },
26     target: {
27       type: Number,
28       default: 0
29     },
30     value: {
31       type: Number,
32       default: 0
33     },
34     fixed: {
35       type: Number,
36       default: 2
37     }
38   },
39   data () {
40     return {
41       trend: this.type && 'up' || 'down',
42       rate: this.percentage
43     }
44   },
45   created () {
46     const type = this.type === null ? this.value >= this.target : this.type
47     this.trend = type ? 'up' : 'down'
48     this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
49   }
50 }
51 </script>
52
53 <style lang="less" scoped>
54   .chart-trend {
55     display: inline-block;
56     font-size: 14px;
57     line-height: 22px;
58
59     .trend-icon {
60       font-size: 12px;
61
62       &.up, &.down {
63         margin-left: 4px;
64         position: relative;
65         top: 1px;
66
67         i {
68           font-size: 12px;
69           transform: scale(.83);
70         }
71       }
72
73       &.up {
74         color: #f5222d;
75       }
76       &.down {
77         color: #52c41a;
78         top: -1px;
79       }
80     }
81   }
82 </style>