Cards.vue
3.3 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
130
131
132
133
134
<template>
<div class="live-item">
<ul class="cardW acea-row">
<li class="card">
<p class="ltop">
<span class="tit">当日客流（人次）</span>
<span class="per">较昨日：<b :class="`${todayNumRate.toString().includes('-')?'asc':'desc'}`">{{todayNumRate}}</b></span>
</p>
<count-up :count="todayNum"></count-up>
</li>
<li class="card">
<p class="ltop">
<span class="tit">近30分钟客流（人次）</span>
<span class="per">较昨日：<b :class="`${recentNumRate.toString().includes('-')?'asc':'desc'}`">{{recentNumRate}}</b></span>
</p>
<count-up :count="recentNum"></count-up>
</li>
<li class="card">
<p class="ltop">
<span class="tit">当前滞流量</span>
<span class="per">较昨日：<b :class="`${currentNumRate.toString().includes('-')?'asc':'desc'}`">{{currentNumRate}}</b></span>
</p>
<count-up :count="currentNum"></count-up>
</li>
</ul>
</div>
</template>
<script>
import countUp from "./countUp";
export default {
inject: ["addModule"],
props: {
mallId: Number,
},
data() {
return {
todayNum: 0,
todayNumRate: 0,
recentNum: 0,
recentNumRate: 0,
currentNum: 0,
currentNumRate: 0,
};
},
components: {
countUp,
},
watch: {
mallId: {
handler(newVal) {
if (newVal) {
this.loadData();
}
},
immediate: true,
},
},
methods: {
loadData() {
let dateStr = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
let params = {
mallId: this.mallId,
countDate: dateStr,
};
this.$api.bigScreen.getMallPassengerFlowInfo(params).then((res) => {
this.todayNum = res.data.data.mall_passenger_flow.today;
this.todayNumRate = res.data.data.mall_passenger_flow.yesterdayRatio;
this.recentNum =
res.data.data.nearly_30_minutes_mall_passenger_flow.today;
this.recentNumRate =
res.data.data.nearly_30_minutes_mall_passenger_flow.yesterdayRatio;
this.currentNum = res.data.data.retention_comparison.today;
this.currentNumRate = res.data.data.retention_comparison.yesterdayRatio;
});
},
},
created() {
this.addModule(this, true);
},
mounted() {
// setInterval(() => {
// this.todayNum += parseInt(100 * Math.random());
// this.recentNum += parseInt(50 * Math.random());
// this.currentNum += parseInt(30 * Math.random());
// }, 2000);
},
};
</script>
<style lang="less" scoped>
.cardW {
font-family: "fangsong";
width: 100%;
justify-content: space-around;
box-sizing: border-box;
padding: 20px 0px;
.card {
//width:30%;
//height: 126px;
box-shadow: 0 0 24px #2660aa inset;
border: 1px solid #2660aa;
margin: 0 0px;
padding: 15px 10px;
box-sizing: border-box;
.ltop {
color: #fff;
font-weight: 500;
margin-bottom: 12px;
.tit {
font-size: 16px;
}
.per {
font-size: 12px;
margin-left: 10px;
vertical-align: bottom;
b {
font-weight: 600;
&.asc {
color: red;
}
&.desc {
color: green;
}
}
}
}
}
}
</style>