114 lines
3.2 KiB
Vue
114 lines
3.2 KiB
Vue
<script>
|
|
export default {
|
|
name: "AppHourCount",
|
|
label: "市场看板-全门店时段合计",
|
|
data() {
|
|
return {
|
|
summary: {},
|
|
tableData: []
|
|
}
|
|
},
|
|
computed: {
|
|
search: v => v.$marketBoard.search,
|
|
columns: v => {
|
|
return [
|
|
{label: '品类', prop: "categoryName", width: 100},
|
|
{label: "总销售额", prop: "compareSaleAmt", align: 'right'},
|
|
{label: "时段销售额", prop: "compareHourTotalAmt", align: 'right'},
|
|
{label: "时段销售额", prop: "currentHourTotalAmt", align: 'right'},
|
|
{label: "销售增长率", prop: "saleGrowthRate", align: 'right'},
|
|
]
|
|
},
|
|
tableConfig: v => {
|
|
return {
|
|
headerBGC: 'rgba(13, 48, 99, 0.6)',
|
|
// headerBGC: '#003B51',
|
|
oddRowBGC: window.evenRowBGC(), evenRowBGC: "transparent",
|
|
header: v.columns.map(e => e.label),
|
|
columnWidth: v.columns.map(e => e.width || "0;flex:1;min-width:0;"),
|
|
align: v.columns.map(e => e.align || "left"),
|
|
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
|
|
}
|
|
},
|
|
summaryRow: v => v.columns.map((column, i) => {
|
|
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
|
|
const style = {textAlign: column.align}
|
|
if (column.width > 0) {
|
|
style.width = `${column.width}px`
|
|
} else {
|
|
style.flex = 1
|
|
style.minWidth = 0
|
|
}
|
|
return {
|
|
style,
|
|
value: isNumber(v.summary[column.prop]) ? v.summary[column.prop] :
|
|
i == 0 ? v.summary.categoryName : ""
|
|
}
|
|
}),
|
|
specialRow: v => {
|
|
let {currentDate, compareDate} = v.search
|
|
const {dayjs} = window
|
|
currentDate = currentDate ? dayjs(currentDate).format("YYYY-MM-DD") : ""
|
|
compareDate = compareDate ? dayjs(compareDate).format("YYYY-MM-DD") : ""
|
|
return [
|
|
{value: "日期", width: 100},
|
|
{value: compareDate, align: 'center',},
|
|
{value: currentDate, align: 'center',},
|
|
].map(column => {
|
|
const style = {textAlign: column.align}
|
|
if (column.width > 0) {
|
|
style.width = `${column.width}px`
|
|
} else {
|
|
style.flex = 1
|
|
style.minWidth = 0
|
|
}
|
|
return {style, value: column.value}
|
|
})
|
|
}
|
|
},
|
|
methods: {
|
|
getTableData() {
|
|
const {$http, $waitFor} = window
|
|
$waitFor($http).then(() => $http.post("/data-boot/la/screen/marketBoard/hourCount", {
|
|
...this.search, limit: 999
|
|
})).then(res => {
|
|
if (res?.data) {
|
|
this.tableData = res.data?.page?.records || []
|
|
this.summary = res.data?.total
|
|
}
|
|
})
|
|
},
|
|
},
|
|
watch: {
|
|
search: {
|
|
immediate: true, deep: true, handler() {
|
|
this.getTableData()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AppHourCount">
|
|
<div class="tableHead flex">
|
|
<div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
|
|
</div>
|
|
<div class="summary flex">
|
|
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
|
|
</div>
|
|
<dv-scroll-board :config="tableConfig"/>
|
|
</section>
|
|
</template>
|
|
|
|
<style>
|
|
.AppHourCount {
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.AppHourCount .dv-scroll-board {
|
|
height: calc(100% - 60px);
|
|
}
|
|
</style>
|