144 lines
3.8 KiB
Vue
144 lines
3.8 KiB
Vue
<template>
|
|
<div class="main">
|
|
<div class="yesterday">
|
|
<div class="top">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/money.svg"></image>
|
|
<p class="title">客单均价<text class="unit">/元</text></p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="item">
|
|
<p class="price">{{ info.MonthAvgTicketPrice?info.MonthAvgTicketPrice:'-' }}</p>
|
|
<p class="text">该服务区</p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.ProvinceAvgTicketPrice?info.ProvinceAvgTicketPrice:'-' }}</p>
|
|
<p class="text">省级平均</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="month">
|
|
<div class="top">
|
|
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/converRate.svg"></image>
|
|
<p class="title">消费转化率<text class="unit">/%</text></p>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="item">
|
|
<p class="price">{{ info.ConvertRate?info.ConvertRate:'-' }}</p>
|
|
<p class="text">该服务区</p>
|
|
</div>
|
|
<div class="item">
|
|
<p class="price">{{ info.ConvertProvinceRate?info.ConvertProvinceRate:'-'}}</p>
|
|
<p class="text">省级平均</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import uCharts from '@/components/u-charts.js';
|
|
var uChartsInstance = {};
|
|
export default {
|
|
name: "transactionAnalysis",
|
|
data() {
|
|
return {
|
|
info:{} //数据内容
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
if (value){
|
|
console.log('bianle',value)
|
|
this.info = value
|
|
console.log('this.info',this.info)
|
|
this.$forceUpdate()
|
|
}else{
|
|
this.info = {}
|
|
}
|
|
},
|
|
deep:true,
|
|
immediate:true,
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main{
|
|
width: 100%;
|
|
.yesterday,.month{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #F7F7F7;
|
|
border-radius: 4px;
|
|
padding: 12px;
|
|
.top{
|
|
display: flex;
|
|
.icon{
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 9px;
|
|
}
|
|
.title{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
.bottom{
|
|
margin-top: 12px;
|
|
width: 100%;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
.item{
|
|
width:50%;
|
|
padding-left: 26px;
|
|
.price{
|
|
font-size: 16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #341D00;
|
|
line-height: 20px;
|
|
margin-bottom: 2px;
|
|
}
|
|
.text{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 20px;
|
|
.unit{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|