index.vue
4.42 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
<template>
<div class="gender-compare">
<ul class="gender-box-top">
<li class="gender-top-item">
<div class="bar-num">{{ headerData.maleTraffic || '--' }}</div>
<div>
<img src="~@/assets/img/man.png" alt="" class="gender-man-img">
<span class="bar-title">{{ $t('head.man') }}</span>
</div>
<div class="gender-progress-bars">
<span class="feature-progress male-feature-progress" :style="{ width: computedProgress(true, headerData.maleTraffic, headerData.femaleTraffic, 'width') }"></span>
</div>
</li>
<li class="gender-top-item">
<div class="bar-num">{{ headerData.femaleTraffic || '--' }}</div>
<div>
<img src="~@/assets/img/woman.png" alt="" class="gender-woman-img">
<span class="bar-title woman-bar-title">{{ $t('head.woman') }}</span>
</div>
<div class="gender-progress-bars">
<span class="feature-progress female-feature-progress" :style="{ width: computedProgress(false, headerData.maleTraffic, headerData.femaleTraffic, 'width') }"></span>
</div>
</li>
<li class="gender-top-item">
<div class="bar-num">{{ computedProgress(true, headerData.maleTraffic, headerData.femaleTraffic, 'ratio') }}</div>
<div>
<img src="~@/assets/img/huiyuan.png" alt="" class="gender-huiyuan-img">
<span class="bar-title huiyuan-bar-title">{{ $t('head.man') }}</span>
</div>
<div class="gender-progress-bars">
<span class="feature-progress huiyuan-feature-progress" :style="{ width: computedProgress(true, headerData.maleTraffic, headerData.femaleTraffic, 'width') }"></span>
</div>
</li>
<li class="gender-top-item">
<div class="bar-num">{{ computedProgress(false, headerData.maleTraffic, headerData.femaleTraffic, 'ratio') }}</div>
<div>
<img src="~@/assets/img/feihuiyuan.png" alt="" class="gender-feihuiyuan-img">
<span class="bar-title feihuiyuan-bar-title">{{ $t('head.woman') }}</span>
</div>
<div class="gender-progress-bars">
<span class="feature-progress feihuiyuan-feature-progress" :style="{ width: computedProgress(false, headerData.maleTraffic, headerData.femaleTraffic, 'width') }"></span>
</div>
</li>
</ul>
<ul class="gender-box-bottom">
<li class="gender-bottom-item">
<div>
<img src="~@/assets/img/dianyuan.png" alt="">
<span class="gender-bottom-title">{{ $t('head.clerkNum') }}</span>
</div>
<div class="bottom-text">{{ headerData.staffManTime || 0 }}</div>
</li>
<li class="gender-bottom-item">
<div>
<img src="~@/assets/img/chongfu.png" alt="">
<span class="gender-bottom-title">{{ $t('head.repeatTraff') }}</span>
</div>
<div class="bottom-text">{{ computedRepeat(headerData) }}</div>
</li>
<li class="gender-bottom-item">
<div>
<img src="~@/assets/img/youxiao.png" alt="">
<span class="gender-bottom-title">{{ $t('head.effectiveTraff') }}</span>
</div>
<div class="bottom-text">{{ headerData.effectiveTraffic || '--' }}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'genderCompare',
props: {
headerData: {
type: Object,
default: () => {}
}
},
watch: {
headerData: {
handler(newVal) {
if(newVal) {}
},
deep: true
},
},
data() {
return {}
},
methods: {
computedProgress(isMan, maleNum, femaleNum, computeType) {
let resultNum = '', totalNum = null, nums = null
if (maleNum && femaleNum) {
totalNum = maleNum + femaleNum
if (isMan) {
nums = (maleNum / totalNum) * 100
resultNum = computeType == 'width' ? nums + '%' : nums.toFixed(2) + '%'
} else {
nums = (femaleNum / totalNum) * 100
resultNum = computeType == 'width' ? nums + '%' : nums.toFixed(2) + '%'
}
return resultNum
} else {
return '--'
}
},
computedRepeat(headerData) {
let repeatNum = null
repeatNum = headerData.dayInnum
&& headerData.effectiveTraffic
&& (headerData.staffManTime || headerData.staffManTime >= 0)
? headerData.dayInnum - headerData.effectiveTraffic - headerData.staffManTime
: '--'
return repeatNum < 0 ? 0 : repeatNum
},
}
}
</script>