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

Merge branch 'gaohao' of https://e.coding.net/g-cphe0354/cashier/cashier-web

This commit is contained in:
GaoHao 2025-04-02 10:48:24 +08:00
parent 1127d7503a e4d162194c
commit 52499c76f0
1 changed files with 48 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,11 +48,11 @@
<div class="h_card_wrap">
<div class="status_wrap">
<div class="left">
<div class="dot"></div>
<div class="dot" />
<span>营业</span>
</div>
<div class="time_wrap u-flex">
<el-radio-group class="m-r-5" v-model="timeValue" @change="timeChange">
<el-radio-group v-model="timeValue" class="m-r-5" @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>
@ -62,20 +62,12 @@
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<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>
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD " @change="summarytrade" />
</div>
</div>
</div>
<div class="content" v-loading="tradeLoading">
<div v-loading="tradeLoading" class="content">
<div class="top">
<div class="item earnings">
<div class="num_wrap">
@ -142,28 +134,20 @@
<!-- <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 class="gropress r" :style="{
width: `${trade.refundAmount
? (trade.refundAmount / (trade.saleAmount * 1 + trade.refundAmount * 1)) *
100
: 0
}%`,
}"
></div>
}" />
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@ -179,30 +163,22 @@
<!-- <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 class="gropress r" :style="{
width: `${trade.rechargeRefundAmount
? (trade.rechargeRefundAmount /
(trade.memberPayAmount + trade.rechargeRefundAmount * 1)) *
100
: 0
}%`,
}"
></div>
}" />
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@ -246,11 +222,7 @@
<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>
@ -283,18 +255,10 @@
<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>
@ -303,20 +267,9 @@
<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 v-show="lineChartType == 0" ref="saleChart" v-loading="saleLoading" class="chart" style="height: 350px" />
<div v-show="lineChartType == 1" ref="payChart" v-loading="payChartLoading" class="chart"
style="height: 350px" />
</div>
<!-- 商品销售排行 -->
<div class="item" style="margin-left: 20px">
@ -347,23 +300,15 @@
</div> -->
</div>
<div class="table w-full">
<el-table :data="saleTable" v-loading="saleTableLoading" style="width: 100%">
<el-table v-loading="saleTableLoading" :data="saleTable" style="width: 100%">
<!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
<el-table-column label="商品名称" prop="productName"></el-table-column>
<el-table-column label="数量" prop="number"></el-table-column>
<el-table-column label="金额" prop="amount"></el-table-column>
<el-table-column label="商品名称" prop="productName" />
<el-table-column label="数量" prop="number" />
<el-table-column label="金额" prop="amount" />
</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"
layout="total, prev, pager, next, jumper" @current-change="paginationChange" />
</div>
</div>
</div>
@ -804,7 +749,10 @@ export default {
x: "center",
},
tooltip: {
trigger: "axis",
trigger: "item",
formatter: (params) => {
return `${params.value}`;
},
},
xAxis: [
{