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
| <template>
| <view class="column">
| <view v-for="(item,index) in progressList" :key="index" :class="['row','font-small','progress',padMiddle?'paddingMiddle':'']">
| <text class="title">{{item.name}}</text>
| <view class="body">
| <view class="number">{{item.now?item.now+"/":""}}{{item.expect}} [{{item.value}}%]</view>
| <progress :percent="item.value" backgroundColor="#C9C9C9"
| :border-radius="borderRadius?borderRadius+'rpx':'0px'"
| :color="time"
| stroke-width="16" />
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name:'data-progress',
| props: {
| progressList: {
| type: Array,
| default: ()=> {
| return []
| }
| },
| borderRadius:{
| type:Number,
| default:0
| },
| padMiddle:{
| type:String,
| default:"false"
| }
| },
| data() {
| return {
| time:0
| }
| },
| watch:{
| "progressList":{
| deep: true,
| handler: function(newVal, oldVal) {
| this.time = newVal.filter(x=>x.name=="时间进度")[0].value;
| }
| }
| },
| created() {
| this.time = this.progressList.filter(x=>x.name=="时间进度")[0].value;
| }
| }
| </script>
|
| <style lang="scss">
| .paddingMiddle{
| padding: 18rpx 10rpx;
| }
| .progress{
|
| .title{
| font-size: 28rpx;
| width: 170rpx;
| display: flex;
| align-items: center;
|
| }
| .body{
| position: relative;
| flex: 1;
|
| .number{
| color: #fff;
| position: absolute;
| z-index: 2;
| left: 26rpx;
| height: 100%;
| display: flex;
| align-items: center;
| text-overflow: ellipsis;
| white-space: nowrap;
| overflow: hidden;
| height: 44rpx;
| }
| progress{
| padding: 6rpx 0;
| }
|
| }
| }
|
|
|
| </style>
|
|
