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

2
src/assets/main.css
View File

@@ -104,7 +104,7 @@ a, .green {
.summary .item, .tableHead .item { .summary .item, .tableHead .item {
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
padding: 0 10px; padding: 0 6px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
line-height: 17px; line-height: 17px;

25
src/views/AppCarouselList.vue
View File

@@ -1,5 +1,4 @@
<script> <script>
const currentDate = "20240705"
export default { export default {
name: "AppCarouselList", name: "AppCarouselList",
label: "分柜监控", label: "分柜监控",
@@ -71,7 +70,7 @@ export default {
}, },
getStoreKeyGoods() { getStoreKeyGoods() {
return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", { return $http.post("/data-boot/la/screen/singleStoreBoard/singStoreKeyGoodsSale", {
type: "1", ...this.search, currentDate type: "1", ...this.search,
}).then(res => { }).then(res => {
if (res?.data) { if (res?.data) {
this.storeKeyGoods = res.data this.storeKeyGoods = res.data
@@ -105,16 +104,14 @@ export default {
column.format ? column.format(e) : e[column.prop])) || [], column.format ? column.format(e) : e[column.prop])) || [],
} }
}, },
openNearbyStores({rowIndex}, store) { openNearbyStores({thirdGoodsCode}, store) {
const {thirdGoodsCode} = this.storeKeyGoods[rowIndex], const {longitude, latitude} = store
{longitude, latitude} = store
return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", { return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
type: "1", ...this.search, longitude, latitude, thirdGoodsCode, currentDate type: "1", ...this.search, longitude, latitude, thirdGoodsCode,
}).then(res => { }).then(res => {
if (res?.data) { if (res?.data) {
this.$storeBoard.aroundStock = res.data this.$storeBoard.aroundStock = res.data
this.$nextTick(() => this.$storeBoard.dialog = true) this.$nextTick(() => this.$storeBoard.dialog = true)
console.log(this.$storeBoard)
} }
}) })
} }
@@ -152,12 +149,16 @@ export default {
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="subTitle" v-text="'品类销售情况'"/> <div class="subTitle" v-text="'品类销售情况'"/>
<dv-scroll-board :config="getTableData(store, '品类销售情况')"/> <scroll-table :table-data="store.categorySale" :columns="columns['品类销售情况']"/>
<!--<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>-->
<div class="subTitle" v-text="'重点单品情况'"/> <div class="subTitle" v-text="'重点单品情况'"/>
<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/> <scroll-table :table-data="store.keyGoods" :columns="columns['重点单品情况']" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
<!--<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>-->
</div> </div>
</div> </div>
<dv-scroll-board v-if="$storeBoard.dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/> <div class="dialogTable" v-if="$storeBoard.dialog" @click.stop>
<scroll-table :table-data="$storeBoard.aroundStock" :columns="columns['周边库存情况']"/>
</div>
</section> </section>
</template> </template>
@@ -167,8 +168,8 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.AppCarouselList .dv-scroll-board { .AppCarouselList .dv-scroll-board, .AppCarouselList .scrollTable {
height: 200px; height: 200px !important;
} }
.AppCarouselList .headerTitle { .AppCarouselList .headerTitle {

23
src/views/AppGroupMonitorTable.vue
View File

@@ -8,15 +8,15 @@ export default {
columns: [ columns: [
{label: "课区", prop: "groupName", width: 50, align: 'center'}, {label: "课区", prop: "groupName", width: 50, align: 'center'},
{label: "课长", prop: "supervisorName", width: 60, align: 'center'}, {label: "课长", prop: "supervisorName", width: 60, align: 'center'},
{label: "销售额", prop: "saleAmt", width: 60, align: 'right'}, {label: "销售额", prop: "saleAmt", width: 60, align: 'right', headerAlign: 'left'},
{label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right'}, {label: "外卖销售额", prop: "deliverySaleAmt", width: 60, align: 'right', headerAlign: 'left'},
{label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right'}, {label: "有效订单数", prop: "validOrderNum", width: 60, align: 'right', headerAlign: 'left'},
{label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right'}, {label: "客单价", prop: "customerUnitPrice", width: 58, align: 'right', headerAlign: 'left'},
{label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right'}, {label: "蛋糕销售额", prop: "cakeSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
{label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right'}, {label: "西点销售额", prop: "westSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
{label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right'}, {label: "现烤销售额", prop: "bakeSaleAmt", width: 60, align: 'right', headerAlign: 'left'},
{label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right'}, {label: "现烤损货比", prop: "lossAmtRate", width: 60, align: 'right', headerAlign: 'left'},
{label: "环比(目标完成比)", prop: "targetRate", align: 'right'}, {label: "环比(目标完成比)", prop: "targetRate", align: 'right', headerAlign: 'left'},
], ],
summary: {} summary: {}
} }
@@ -74,7 +74,8 @@ export default {
<template> <template>
<section class="AppGroupMonitorTable"> <section class="AppGroupMonitorTable">
<dv-scroll-board :config="tableConfig" @click=""/> <!--<dv-scroll-board :config="tableConfig"/>-->
<scroll-table :table-data="tableData" :columns="columns"/>
<div class="summary flex"> <div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/> <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div> </div>
@@ -87,7 +88,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
.AppGroupMonitorTable .dv-scroll-board { .AppGroupMonitorTable .dv-scroll-board, .AppGroupMonitorTable .scrollTable {
height: calc(100% - 30px) !important; height: calc(100% - 30px) !important;
} }
</style> </style>

6
src/views/AppHourCount.vue
View File

@@ -97,7 +97,8 @@ export default {
<div class="summary flex"> <div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/> <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div> </div>
<dv-scroll-board :config="tableConfig"/> <scroll-table :tableData="tableData" :columns="columns"/>
<!--<dv-scroll-board :config="tableConfig"/>-->
</section> </section>
</template> </template>
@@ -105,9 +106,10 @@ export default {
.AppHourCount { .AppHourCount {
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
min-width: 480px;
} }
.AppHourCount .dv-scroll-board { .AppHourCount .dv-scroll-board,.AppHourCount .scrollTable{
height: calc(100% - 60px); height: calc(100% - 60px);
} }
</style> </style>

46
src/views/AppHourSale.vue
View File

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

3
src/views/AppKeyGoods.vue
View File

@@ -52,7 +52,8 @@ export default {
<template> <template>
<section class="AppKeyGoods"> <section class="AppKeyGoods">
<dv-scroll-board :config="tableConfig"/> <scroll-table :table-data="tableData" :columns="columns"/>
<!--<dv-scroll-board :config="tableConfig"/>-->
</section> </section>
</template> </template>

2
src/views/AppStoreBoard.vue
View File

@@ -21,7 +21,7 @@ export default {
<app-store-board-filter/> <app-store-board-filter/>
<div class="flex"> <div class="flex">
<app-carousel-list class="fill"/> <app-carousel-list class="fill"/>
<div> <div style="width: 480px;">
<app-sub-title/> <app-sub-title/>
<app-realtime-panel/> <app-realtime-panel/>
<app-store-key-goods/> <app-store-key-goods/>

8
src/views/AppStoreKeyGoods.vue
View File

@@ -36,9 +36,8 @@ export default {
} }
}, },
methods: { methods: {
openNearbyStores({rowIndex}) { openNearbyStores({thirdGoodsCode}) {
const {thirdGoodsCode} = this.tableData[rowIndex], const {storeCode, longitude, latitude} = this.$storeBoard.store
{storeCode, longitude, latitude} = this.$storeBoard.store
return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", { return $http.post("/data-boot/la/screen/multipleStoreBoard/aroundStock", {
type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode, type: "1", ...this.search, storeCode, longitude, latitude, thirdGoodsCode,
}).then(res => { }).then(res => {
@@ -55,7 +54,8 @@ export default {
<template> <template>
<section class="AppStoreKeyGoods"> <section class="AppStoreKeyGoods">
<div class="subTitle" v-text="'重点单品情况'"/> <div class="subTitle" v-text="'重点单品情况'"/>
<dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/> <scroll-table :table-data="tableData" :columns="columns" @click="openNearbyStores" @click.native.stop/>
<!--<dv-scroll-board :config="tableConfig" @click="openNearbyStores" @click.native.stop/>-->
</section> </section>
</template> </template>

6
src/views/AppStoreMonitor.vue
View File

@@ -81,7 +81,8 @@ export default {
<el-option v-for="(name,i) in options" :key="i" :label="name" :value="name"/> <el-option v-for="(name,i) in options" :key="i" :label="name" :value="name"/>
</el-select> </el-select>
</div> </div>
<dv-scroll-board :config="tableConfig"/> <scroll-table :table-data="tableData" :columns="columns"/>
<!--<dv-scroll-board :config="tableConfig"/>-->
<div class="summary flex"> <div class="summary flex">
<div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/> <div class="item" v-for="(col,i) in summaryRow" :key="i" v-text="col.value" :style="col.style"/>
</div> </div>
@@ -93,9 +94,10 @@ export default {
flex-shrink: 0 !important; flex-shrink: 0 !important;
color: #fff; color: #fff;
box-sizing: border-box; box-sizing: border-box;
width: 660px;
} }
.AppStoreMonitor .dv-scroll-board { .AppStoreMonitor .dv-scroll-board,.AppStoreMonitor .scrollTable{
height: calc(100% - 30px - 55px) !important; height: calc(100% - 30px - 55px) !important;
} }

15
src/views/AppStoresTable.vue
View File

@@ -169,14 +169,19 @@ export default {
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<div class="subTitle" v-text="'品类销售情况'"/> <div class="subTitle" v-text="'品类销售情况'"/>
<dv-scroll-board :config="getTableData(store, '品类销售情况')"/> <scroll-table :table-data="store.categorySale" :columns="columns['品类销售情况']"/>
<!--<dv-scroll-board :config="getTableData(store, '品类销售情况')"/>-->
<div class="subTitle" v-text="'重点单品情况'"/> <div class="subTitle" v-text="'重点单品情况'"/>
<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/> <scroll-table :table-data="store.keyGoods" :columns="columns['重点单品情况']" @click="v=>openNearbyStores(v,store)" @click.native.stop/>
<!--<dv-scroll-board :config="getTableData(store, '重点单品情况')" @click="v=>openNearbyStores(v,store)" @click.native.stop/>-->
</div> </div>
</div> </div>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
<dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/> <div class="dialogTable" v-if="dialog" @click.stop>
<scroll-table :table-data="aroundStock" :columns="columns['周边库存情况']"/>
</div>
<!--<dv-scroll-board v-if="dialog" class="dialogTable" :config="getTableData({}, '周边库存情况',5)" @click.native.stop/>-->
</section> </section>
</template> </template>
@@ -188,8 +193,8 @@ export default {
position: relative; position: relative;
} }
.AppStoresTable .dv-scroll-board { .AppStoresTable .dv-scroll-board, .AppStoresTable .scrollTable {
height: 130px; height: 130px !important;
} }
.AppStoresTable .headerTitle { .AppStoresTable .headerTitle {