StoreRankList.nvue
3.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<template>
<view class="rank-list" v-if="data.length > 0">
<view class="rank-item" v-for="(item, index) in data" :key="item.name">
<view class="rank-item-left r-i-title">
<image :src="rankImg[index]" style="width: 50rpx; height: 32rpx;" v-if="index<=2" mode=""></image>
<uv-text v-else :text="'0' + `${index+1}`" color="#4E515E" size="28rpx" style="text-align: center; min-width: 50rpx;"></uv-text>
</view>
<view class="rank-item-right">
<view class="r-i-head">
<uv-text style="padding-right: 20rpx;" size="26rpx" :text="item.name" lines="1"></uv-text>
</view>
<view class="r-i-container">
<view class="percent" :style="{width:getRankPercentVal(item.value)}"></view>
</view>
</view>
<view class="rank-item-last">
<uv-text style="font-weight: 500;" color="#262626" size="26rpx" :text="formatIndicatorValue(indicatorKey,item.value)"></uv-text>
</view>
</view>
</view>
<view class="p-empty" v-else style="margin-top: 40rpx;">
<image class="p-empty-img" src="/static/common/empty.png" mode=""></image>
<text class="p-empty-text chart-text">{{ t('maintenance.monitor.project.empty.text') }}</text>
</view>
</template>
<script setup>
// import {
// rank1,
// rank2,
// rank3
// } from '@/static/base64.js'
import rank1 from '@/static/message/rank1.png'
import rank2 from '@/static/message/rank2.png'
import rank3 from '@/static/message/rank3.png'
import {
computed
} from 'vue'
import {
formatIndicatorValue
} from '@/utils'
import {
t
} from '@/plugins/index.js'
const props = defineProps({
data: {
type: Array,
default: () => []
},
indicatorKey: {
type: String,
required: true
}
})
const rankImg = [rank1, rank2, rank3]
const maxVal = computed(() => {
return Math.max(...props.data.map(item => item.value))
})
function getRankPercentVal(val) {
if (val === 0) {
return 0
}
return maxVal === 0 ? '0rpx' : (((val / maxVal.value) * 654).toFixed(0) + 'rpx')
// return '210px'
}
</script>
<style lang="scss" scoped>
.rank-list {
padding-top: 28rpx;
// padding: 28rpx 0 14rpx;
.rank-item {
margin-bottom: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
.rank-item-left {
}
.rank-item-right {
flex: 1;
margin: 0 16rpx;
}
.rank-item-last {
max-width: 96rpx;
// align-self: end;
margin-top: 34rpx;
}
.r-i-head {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 14rpx;
.r-i-title {
text-align: center;
display: flex;
align-items: center;
flex-direction: row;
padding-right: 20rpx;
}
}
.r-i-container {
min-width: 500rpx;
max-width: 524rpx;
height: 16rpx;
background-color: #F7F8FB;
border-radius: 12rpx;
overflow: hidden;
.percent {
width: 0;
transition-duration: all 1s;
height: 16rpx;
border-radius: 12rpx;
background-color: #4277F7;
}
}
}
}
</style>