This commit is contained in:
2025-03-20 14:47:06 +08:00
3 changed files with 54 additions and 109 deletions

View File

@@ -61,16 +61,9 @@
<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>
<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 class="content" v-loading="tradeLoading">
@@ -127,7 +120,9 @@
</div>
</div>
</template>
<el-icon><QuestionFilled /></el-icon>
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
</div>
@@ -138,28 +133,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>
<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" />
@@ -175,30 +162,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>
<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" />
@@ -242,12 +221,10 @@
<div class="item item2">
<div class="title">
翻台率
<el-tooltip
effect="dark"
content="翻台率=(客单数-桌台数)/桌台数*100%"
placement="top"
>
<el-icon><QuestionFilled /></el-icon>
<el-tooltip effect="dark" content="翻台率=(客单数-桌台数)/桌台数*100%" placement="top">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</div>
<div class="icon_wrap">
@@ -277,18 +254,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>
@@ -297,20 +266,10 @@
<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">
@@ -347,17 +306,9 @@
<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>