327 lines
11 KiB
Vue
327 lines
11 KiB
Vue
<template>
|
|
<div class="revenueAnalysisMain">
|
|
<div class="revenueAnalysis">
|
|
<div class="revenueTop" @click="handleRevenueDetail">
|
|
<div class="revenueTopLeft">
|
|
<image class="revenueLogo" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerLogo.svg"/>
|
|
<div class="revenueTopMoney">
|
|
<div class="moneyBox">
|
|
<text class="text">{{dataInfo.CashPay}}</text>
|
|
<image class="moneyIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercialBI/managerGood.svg"/>
|
|
</div>
|
|
<text class="labelText">实收总额<text class="labelUnit">/元</text></text>
|
|
</div>
|
|
</div>
|
|
<div class="revenueTopRight">
|
|
<!-- <span class="addText">+8.24%</span>-->
|
|
<!-- <span class="addType">比计划</span>-->
|
|
</div>
|
|
</div>
|
|
<div class="revenueDetailList">
|
|
<div class="revenueDetailItem">
|
|
<text class="itemValue">{{dataInfo.Different_Price_More}}</text>
|
|
<text class="itemLabel">长款金额<text class="itemUnit">/元</text></text>
|
|
</div>
|
|
<div class="revenueDetailItem">
|
|
<text class="itemValue">{{dataInfo.Different_Price_Less}}</text>
|
|
<text class="itemLabel">短款金额<text class="itemUnit">/元</text></text>
|
|
</div>
|
|
<div class="revenueDetailItem">
|
|
<text class="itemValue">{{dataInfo.TotalOffAmount}}</text>
|
|
<text class="itemLabel">优惠金额<text class="itemUnit">/元</text></text>
|
|
</div>
|
|
<div class="revenueDetailItem" style="margin-top: 32rpx">
|
|
<text class="itemValue">{{dataInfo.TicketCount}}</text>
|
|
<text class="itemLabel">客单数量<text class="itemUnit">/笔</text></text>
|
|
</div>
|
|
<div class="revenueDetailItem" style="margin-top: 32rpx">
|
|
<text class="itemValue">{{dataInfo.TotalCount}}</text>
|
|
<text class="itemLabel">商品出售<text class="itemUnit">/件</text></text>
|
|
</div>
|
|
<div class="revenueDetailItem" style="margin-top: 32rpx">
|
|
<text class="itemValue">{{dataInfo.average}}</text>
|
|
<text class="itemLabel">商品均价<text class="itemUnit">/元</text></text>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div class="item">-->
|
|
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/agreement.svg"></image>-->
|
|
<!-- <div class="info" style="margin-bottom: 24px;">-->
|
|
<!-- <p class="title">合同总金额<text class="unit">/万元</text></p>-->
|
|
<!-- <p class="value">{{dataInfo.ContractProfitLoss}}</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="item" style="margin-bottom: 24px;">-->
|
|
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shopNumber.svg"></image>-->
|
|
<!-- <div class="info">-->
|
|
<!-- <p class="title">店铺数量<text class="unit">/个</text></p>-->
|
|
<!-- <p class="value">{{dataInfo.ShopCount}}</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="item">-->
|
|
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/add.svg"></image>-->
|
|
<!-- <div class="info">-->
|
|
<!-- <p class="title">欠款金额<text class="unit">/万元</text></p>-->
|
|
<!-- <p class="value">{{dataInfo.SalesPerSquareMeter}}</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="item">-->
|
|
<!-- <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/overShop.svg"></image>-->
|
|
<!-- <div class="info">-->
|
|
<!-- <p class="title">半年到期合同<text class="unit">/个</text></p>-->
|
|
<!-- <p class="value">{{dataInfo.ExpiredShopCount}}</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<!-- <div class="list" v-if="id">-->
|
|
<!--<!– <p class="bigTitle" v-if="dataInfo.ContractList.length>0">即将到期合同列表: </p>–>-->
|
|
<!-- <div class="item" v-for="(item,index) in dataInfo.ContractList" :key="index">-->
|
|
<!-- <div class="title">{{item.name}}</div>-->
|
|
<!-- <div class="value">{{item.value}}到期</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "revenueAnalysis",
|
|
data() {
|
|
return {
|
|
dataInfo:{},
|
|
}
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
id:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
},
|
|
watch: {
|
|
data: {
|
|
handler(value) {
|
|
this.dataInfo = JSON.parse(JSON.stringify(value))
|
|
this.dataInfo.CashPay = this.$util.fmoney(this.dataInfo.CashPay,2)
|
|
this.dataInfo.Different_Price_More = this.$util.fmoney(this.dataInfo.Different_Price_More,2)
|
|
this.dataInfo.Different_Price_Less = this.$util.fmoney(this.dataInfo.Different_Price_Less,2)
|
|
this.dataInfo.TotalOffAmount = this.$util.fmoney(this.dataInfo.TotalOffAmount,2)
|
|
this.dataInfo.TicketCount = this.$util.fmoney(this.dataInfo.TicketCount,2)
|
|
this.dataInfo.TotalCount = this.$util.fmoney(this.dataInfo.TotalCount,2)
|
|
this.dataInfo.average = value.TicketCount? this.$util.fmoney((Number(value.CashPay) / Number(value.TicketCount)),2):'0.00'
|
|
// this.dataInfo.ContractProfitLoss = this.$util.fmoney(this.dataInfo.ContractProfitLoss)
|
|
// this.dataInfo.SalesPerSquareMeter = this.$util.fmoney(this.dataInfo.SalesPerSquareMeter)
|
|
}
|
|
},
|
|
deep:true
|
|
},
|
|
methods: {
|
|
handleRevenueDetail() {
|
|
let lastDay = uni.getStorageSync('lastDay')
|
|
let date = new Date(lastDay)
|
|
let y = date.getFullYear()
|
|
let m = date.getMonth() + 1
|
|
if (m < 10) {
|
|
m = '0' + m
|
|
}
|
|
console.log('lastDay',lastDay)
|
|
let currentService = uni.getStorageSync('currentService')
|
|
this.$util.toNextRoute('navigateTo',`/pages/operatingStatements/detail?BusinessTypeValue=0&SettlementModeValue=0&et=${lastDay}&id=${currentService.Serverpart_ID}&pcode=340000&searchKey=MerchantName,Brand,Shop,Serverpart&searchValue=&st=${y}-${m}-01`)
|
|
// BusinessTypeValue: "0"
|
|
// SettlementModeValue: "0"
|
|
// et: "2023-12-18"
|
|
// id: "489"
|
|
// pcode: "340000"
|
|
// searchKey: "MerchantName,Brand,Shop,Serverpart"
|
|
// searchValue: ""
|
|
// st: "2023-12-01"
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.revenueAnalysisMain{
|
|
.revenueAnalysis{
|
|
width: 100%;
|
|
background: #FAF9FC;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx 24rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
margin-top: 12px;
|
|
.revenueTop{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.revenueTopLeft{
|
|
display: flex;
|
|
height: 88rpx;
|
|
.revenueLogo{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
.revenueTopMoney{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 88rpx;
|
|
.moneyBox{
|
|
height: 48rpx;
|
|
.text{
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #160002;
|
|
line-height: 48rpx;
|
|
}
|
|
.moneyIcon{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
.labelText{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40rpx;
|
|
.labelUnit{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.revenueTopRight{
|
|
height: 88rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
.addText{
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #E83944;
|
|
line-height: 48rpx;
|
|
}
|
|
.addType{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.revenueDetailList{
|
|
width: 100%;
|
|
margin-top: 48rpx;
|
|
.revenueDetailItem{
|
|
display: inline-block;
|
|
width: calc(100% / 3);
|
|
.itemValue{
|
|
font-size: 28rpx;
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
color: #341D00;
|
|
line-height: 40rpx;
|
|
}
|
|
.itemLabel{
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #786B6C;
|
|
line-height: 40rpx;
|
|
.itemUnit{
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #A69E9F;
|
|
line-height: 40rpx;
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item{
|
|
width: 50%;
|
|
display: flex;
|
|
.icon{
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
.info{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
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;
|
|
}
|
|
}
|
|
.value{
|
|
font-size:16px;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #341D00;
|
|
line-height: 20px;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
margin-top: 12px;
|
|
.bigTitle{
|
|
font-size: 16px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 600;
|
|
color: #160002;
|
|
}
|
|
.item{
|
|
width: 100%;
|
|
display: flex;
|
|
.title{
|
|
flex: 1;
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
}
|
|
.value{
|
|
font-size: 14px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #160002;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|