kubbo/kengee-data-screen
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

调整table滚动兼顾使用滚动条

Browse Source
This commit is contained in:
Kubbo
2024-08-05 03:28:19 +08:00
parent 1d8d0a05e5
commit 5fc5146d01
10 changed files with 81 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/AppHourSale.vue
View File

@@ -12,16 +12,29 @@ export default {
},
computed: {
search: v => v.$marketBoard.search,
columns: () => {
columns: 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 [
{label: "时段", width: 100, prop: "hour"},
{label: "销售额", prop: "compareSaleAmt", align: 'center'},
{label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
{label: "销售额", prop: "currentSaleAmt", align: 'center'},
{label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
{label: "日期", children: [{label: "时段", width: 100, prop: "hour"}]},
{
label: compareDate, align: 'center', children: [
{label: "销售额", prop: "compareSaleAmt", align: 'center'},
{label: "有效订单数", prop: "compareValidOrderNum", align: 'center'},
]
},
{
label: currentDate, align: 'center', children: [
{label: "销售额", prop: "currentSaleAmt", align: 'center'},
{label: "有效订单数", prop: "currentValidOrderNum", align: 'center'},
]
},
{label: "销售增长率", width: 80, align: 'center', prop: "saleGrowthRate"},
]
},
tableColumns: v => v.columns.map(e => e.children || e).flat(),
tableConfig: v => {
return {
headerBGC: 'rgba(13, 48, 99, 0.6)',
@@ -32,7 +45,7 @@ export default {
data: v.tableData.map(e => v.columns.map(column => e[column.prop])),
}
},
summaryRow: v => v.columns.map((column, i) => {
summaryRow: v => v.tableColumns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
@@ -77,15 +90,17 @@ export default {
})).then(res => {
if (res?.data) {
this.summary = res.data.total
this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${e.hour.padStart(2, '0')}:00-${`${Number(e.hour)+1}`.padStart(2, '0')}:00`})) || []
this.tableData = res.data?.page?.records?.map(e => ({...e, hour: `${e.hour.padStart(2, '0')}:00-${`${Number(e.hour) + 1}`.padStart(2, '0')}:00`})) || []
}
})
},
handleSta({rowIndex}) {
handleSta({hour}) {
const rowIndex = this.tableData.findIndex(e => e.hour == hour)
const v = this
const summary = {
compareSaleAmt: 0, compareValidOrderNum: 0, currentSaleAmt: 0, currentValidOrderNum: 0, saleGrowthRate: 0
}
console.log(rowIndex)
v.tableData.forEach((e, i) => {
if (i <= rowIndex) {
summary.compareSaleAmt += Number(e.compareSaleAmt || 0)
@@ -102,7 +117,7 @@ export default {
summary.saleGrowthRate = summary.saleGrowthRate.toFixed(2) + "%"
}
})
this.hourSummary = v.columns.map((column, i) => {
this.hourSummary = v.tableColumns.map((column, i) => {
const isNumber = v => /^-?\d+(\.\d+)?%?$/.test(v)
const style = {textAlign: column.align}
if (column.width > 0) {
@@ -137,10 +152,8 @@ export default {
<template>
<section class="AppHourSale" @mousemove="handleMouseOver">
<div class="tableHead flex">
<div class="item" v-for="(col,i) in specialRow" :key="i" v-text="col.value" :style="col.style"/>
</div>
<dv-scroll-board :config="tableConfig" @mouseover="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>
<scroll-table :table-data="tableData" :columns="columns" @click="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>
<!--<dv-scroll-board :config="tableConfig" @mouseover="handleSta" @mouseout.native="hourSummaryStyle={display:'none'}"/>-->
<div class="summary flex hourSummary" :style="hourSummaryStyle">
<div class="item" v-for="(col,i) in hourSummary" :key="i" v-text="col.value" :style="col.style"/>
</div>
@@ -157,8 +170,9 @@ export default {
position: relative;
}
.AppHourSale .dv-scroll-board {
height: calc(100% - 60px);
.AppHourSale .dv-scroll-board, .AppHourSale .scrollTable {
height: calc(100% - 60px) !important;
border-color: transparent;
}
.hourSummary {