<template>
|
<div class="TopTenCustomers">
|
<!-- 操作按钮区域 -->
|
<div class="customer-ct">
|
<div class="customer-name">忠实客户TOP10</div>
|
<div>
|
<div class="customer-title-ct">
|
<div>车牌号码</div>
|
<div>加油次数</div>
|
</div>
|
<div class="customer-item" v-for="(item, index) in customerData.type1" :key="index">
|
<div class="license-num">{{ item.licenseNum }}</div>
|
<div class="customer-proportion">
|
<div class="proportion-ct">
|
<div class="proportion-bg" :style="{ width: (item.oilCount / typeOneTotal) * 100 + '%' }"></div>
|
</div>
|
<div>{{ item.oilCount }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="customer-ct">
|
<div class="customer-name">流失客户TOP10</div>
|
<div>
|
<div class="customer-title-ct">
|
<div>车牌号码</div>
|
<div>加油次数</div>
|
</div>
|
<div class="customer-item" v-for="(item, index) in customerData.type2" :key="index">
|
<div class="license-num">{{ item.licenseNum }}</div>
|
<div class="customer-proportion">
|
<div class="proportion-ct">
|
<div
|
class="proportion-bg type-two-bg"
|
:style="{ width: (item.oilCount / typeTwoTotal) * 100 + '%' }"
|
></div>
|
</div>
|
<div>{{ item.oilCount }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ActivityList',
|
props: {
|
customerData: {
|
type: Object,
|
default: () => {
|
return {}
|
},
|
},
|
typeOneTotal: {
|
type: Number,
|
default: 0,
|
},
|
typeTwoTotal: {
|
type: Number,
|
default: 0,
|
},
|
},
|
data() {
|
return {
|
description: '客户TOP10',
|
}
|
},
|
|
methods: {},
|
|
created() {},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
/deep/ .ant-table-body {
|
height: 500px;
|
}
|
.TopTenCustomers {
|
display: flex;
|
margin-right: 30px;
|
margin-top: 14px;
|
.customer-ct {
|
width: 35%;
|
margin: 0 12px;
|
.customer-name {
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 12px;
|
}
|
.customer-title-ct {
|
display: flex;
|
div {
|
flex: 1;
|
border: 1px solid #47505f;
|
padding: 8px 12px;
|
}
|
}
|
.customer-item {
|
display: flex;
|
.license-num,
|
.customer-proportion {
|
flex: 1;
|
border: 1px solid #47505f;
|
padding: 8px 12px;
|
}
|
.customer-proportion {
|
display: flex;
|
align-items: center;
|
.proportion-ct {
|
width: 80%;
|
height: 20px;
|
position: relative;
|
margin-right: 12px;
|
.proportion-bg {
|
position: absolute;
|
top: 5%;
|
left: 0;
|
width: 70%;
|
height: 14px;
|
background: #5b81f9;
|
}
|
.type-two-bg {
|
background: #ebc474;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
