czg_team
/
cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 数据统计，销售统计搜索框样式调整

This commit is contained in:
YeMingfei666 2025-03-31 10:13:20 +08:00
parent 892434e353
commit fcd8dd90be
2 changed files with 102 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/views/data/index.vue
View File

@ -51,8 +51,8 @@
<div class="dot"></div>
<span>营业</span>
</div>
<div class="time_wrap">
<el-radio-group v-model="timeValue" @change="timeChange">
<div class="time_wrap u-flex">
<el-radio-group class="m-r-5" v-model="timeValue" @change="timeChange">
<el-radio-button value="0">今天</el-radio-button>
<el-radio-button value="-1">昨天</el-radio-button>
<el-radio-button value="-7">最近7天</el-radio-button>
@ -61,9 +61,18 @@
<el-radio-button value="month">本月</el-radio-button>
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="YYYY-MM-DD " v-if="timeValue == 'custom'"
@change="summarytrade"></el-date-picker>
<div class="u-flex">
<el-date-picker
v-model="query.createdAt"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD "
v-if="timeValue == 'custom'"
@change="summarytrade"
></el-date-picker>
</div>
</div>
</div>
<div class="content" v-loading="tradeLoading">
@ -133,20 +142,28 @@
<!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
</div>
<div class="line_gropress">
<div class="gropress l" :style="{
width: `${trade.saleAmount
? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
100
: 0
<div
class="gropress l"
:style="{
width: `${
trade.saleAmount
? (trade.saleAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
100
: 0
}%`,
}"></div>
<div class="gropress r" :style="{
width: `${trade.refundAmount
? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
100
: 0
}"
></div>
<div
class="gropress r"
:style="{
width: `${
trade.refundAmount
? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
100
: 0
}%`,
}"></div>
}"
></div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@ -162,22 +179,30 @@
<!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
</div>
<div class="line_gropress">
<div class="gropress l" :style="{
width: `${trade.rechargeAmount
? (trade.rechargeAmount /
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
100
: 0
<div
class="gropress l"
:style="{
width: `${
trade.rechargeAmount
? (trade.rechargeAmount /
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
100
: 0
}%`,
}"></div>
<div class="gropress r" :style="{
width: `${trade.rechargeRefundAmount
? (trade.rechargeRefundAmount /
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
100
: 0
}"
></div>
<div
class="gropress r"
:style="{
width: `${
trade.rechargeRefundAmount
? (trade.rechargeRefundAmount /
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
100
: 0
}%`,
}"></div>
}"
></div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@ -221,7 +246,11 @@
<div class="item item2">
<div class="title">
翻台率
<el-tooltip effect="dark" content="翻台率=（客单数-桌台数）/桌台数*100%" placement="top">
<el-tooltip
effect="dark"
content="翻台率=（客单数-桌台数）/桌台数*100%"
placement="top"
>
<el-icon>
<QuestionFilled />
</el-icon>
@ -254,10 +283,18 @@
<div class="item">
<div class="header">
<div class="tab_wrap">
<div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">
<div
class="item"
:class="{ active: lineChartType == 0 }"
@click="lineChartTypeChange(0)"
>
销售趋势
</div>
<div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">
<div
class="item"
:class="{ active: lineChartType == 1 }"
@click="lineChartTypeChange(1)"
>
支付占比
</div>
</div>
@ -266,10 +303,20 @@
<el-radio-button value="30">30天</el-radio-button>
</el-radio-group>
</div>
<div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 350px" v-show="lineChartType == 0">
</div>
<div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 350px" v-show="lineChartType == 1">
</div>
<div
class="chart"
ref="saleChart"
v-loading="saleLoading"
style="height: 350px"
v-show="lineChartType == 0"
></div>
<div
class="chart"
ref="payChart"
v-loading="payChartLoading"
style="height: 350px"
v-show="lineChartType == 1"
></div>
</div>
<!-- 商品销售排行 -->
<div class="item" style="margin-left: 20px">
@ -306,9 +353,17 @@
<el-table-column label="数量" prop="number"></el-table-column>
<el-table-column label="金额" prop="amount"></el-table-column>
</el-table>
<div class="head-container" style="padding-top: 20px; display: flex; justify-content: flex-end">
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
@current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
<div
class="head-container"
style="padding-top: 20px; display: flex; justify-content: flex-end"
>
<el-pagination
:total="saleTableTotal"
:page-size="saleTableSize"
:current-page="saleTablePage"
@current-change="paginationChange"
layout="total, prev, pager, next, jumper"
></el-pagination>
</div>
</div>
</div>

11
src/views/data/sales.vue
View File

@ -33,6 +33,7 @@
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<el-date-picker
class="u-m-l-10"
v-model="query.createdAt"
type="daterange"
range-separator="至"
@ -101,7 +102,7 @@
</el-table-column>
<el-table-column label="销售额" prop="total">
<template v-slot="scope">
￥{{ scope.row.total | totalfilter(scope.row.refund) }}
￥{{ scope.row.total }}|{{ totalfilter(scope.row.refund) }}
</template>
</el-table-column>
<el-table-column label="微信小程序支付" prop="wxLite">
@ -191,10 +192,6 @@ export default {
timeFilter(time) {
return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
},
totalfilter(item, d) {
let num = item + d;
return num.toFixed(2);
},
},
mounted() {
this.resetQuery = { ...this.query };
@ -202,6 +199,10 @@ export default {
this.getCategory();
},
methods: {
totalfilter(item, d) {
let num = item + d;
return num.toFixed(2);
},
// 获取商品分类
async getCategory() {
try {