111 lines
2.8 KiB
Vue
111 lines
2.8 KiB
Vue
<script>
|
|
export default {
|
|
name: "AppSalesPerformance",
|
|
label: "市场看板-销售情况",
|
|
data() {
|
|
return {
|
|
info: {},
|
|
list: [
|
|
{label: "过机销售额(万元)", prop: "saleAmt"},
|
|
{label: "有效订单数(单)", prop: "validOrderNum"},
|
|
{label: "客单价(元)", prop: "customerUnitPrice"},
|
|
{label: "店均销售额(元)", prop: "avgSaleAmt"},
|
|
{label: "店均有效订单数(单)", prop: "avgValidOrderNum"},
|
|
{label: "有效订单(单)", prop: "validOrderNum"},
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
search: v => v.$marketBoard.search
|
|
},
|
|
methods: {
|
|
getData() {
|
|
const {$http, $waitFor} = window
|
|
$waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/saleCondition", {
|
|
...this.search
|
|
})).then(res => {
|
|
if (res?.data) {
|
|
this.info = res.data
|
|
}
|
|
})
|
|
},
|
|
getValue(item) {
|
|
let result = this.info[item.prop]
|
|
if (item.unit == "%") result = (result * 100 || 0).toFixed(2) + "%"
|
|
if (item.calc) result = item.calc()
|
|
if (/^-?\d+(\.\d+)?$/.test(result)) result = Number(result).toFixed(2)
|
|
return result
|
|
},
|
|
getIncrement(item) {
|
|
let result = Number(this.info[item.prop + "Diff"] || 0).toFixed(2) || ""
|
|
if (result > 0) result = "↑" + result
|
|
else if (result < 0) result = "↓" + result
|
|
return result
|
|
}
|
|
},
|
|
watch: {
|
|
search: {
|
|
immediate: true, deep: true, handler() {
|
|
this.getData()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AppSalesPerformance">
|
|
<div v-for="(item,i) in list" :key="i" class="item">
|
|
<div v-text="item.label"/>
|
|
<div class="flex">
|
|
<div class="value" v-text="getValue(item)"/>
|
|
<div class="increment" v-text="getIncrement(item)"/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style>
|
|
.AppSalesPerformance {
|
|
display: grid;
|
|
grid-template-columns:auto auto;
|
|
gap: 12px 24px;
|
|
}
|
|
|
|
.AppSalesPerformance .flex {
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
}
|
|
|
|
.AppSalesPerformance .item {
|
|
background: linear-gradient(90deg, rgba(17, 112, 221, 0.5) 0%, rgba(17, 112, 221, 0.01) 100%);
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
line-height: 20px;
|
|
white-space: nowrap;
|
|
border-left: 4px solid rgba(17, 112, 221, 1);
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.AppSalesPerformance .item:nth-of-type(4n-1), .AppSalesPerformance .item:nth-of-type(4n) {
|
|
border-left-color: rgba(1, 196, 236, 1);
|
|
background: linear-gradient(90deg, rgba(1, 196, 236, 0.5) 0%, rgba(1, 196, 236, 0.01) 100%);
|
|
}
|
|
|
|
.AppSalesPerformance .item .value {
|
|
font-family: Helvetica;
|
|
font-size: 20px;
|
|
line-height: 38px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.AppSalesPerformance .item .increment {
|
|
color: #FFD15C;
|
|
line-height: 20px;
|
|
}
|
|
</style>
|