czg_team/management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化问题、更换接口

Browse Source
This commit is contained in:
gyq
2024-09-27 13:44:17 +08:00
parent dc758120c4
commit f0bca6e0d1
12 changed files with 642 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/home/home.vue
View File

@@ -72,7 +72,20 @@
<div class="item earnings">
<div class="num_wrap">
<div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
<div class="tips">营业实收（元）<el-icon class="el-icon-question" /></div>
<div class="tips">营业实收（元）
<el-tooltip popper-class="popper" effect="light" placement="bottom">
<div class="tips_row" slot="content">
<div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
<div class="left">
<img class="icon" :src="item.icon">
<span>{{ item.payType }}</span>
</div>
<span class="num">{{ item.payAmount }}</span>
</div>
</div>
<el-icon class="el-icon-question" />
</el-tooltip>
</div>
</div>
<div class="line_wrap">
<div class="line_item">
@@ -82,9 +95,11 @@
</div>
<div class="line_gropress">
<div class="gropress l"
:style="{ width: `${tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
:style="{ width: `${tradeSale.incomeAmount ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100) : 0}%` }">
</div>
<div class="gropress r"
:style="{ width: `${tradeSale.refundAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
:style="{ width: `${tradeSale.refundAmount ? (tradeSale.refundAmount / tradeSale.totalSaleAmount * 100) : 0}%` }">
</div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@@ -100,10 +115,12 @@
<div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div>
</div>
<div class="line_gropress">
<div class="gropress l" :style="{ width: `${tradeSale.inAmount / tradeSale.totalVipAmount * 100}%` }">
<div class="gropress l"
:style="{ width: `${tradeSale.inAmount ? (tradeSale.inAmount / tradeSale.totalVipAmount * 100) : 0}%` }">
</div>
<div class="gropress r"
:style="{ width: `${tradeSale.outAmount / tradeSale.totalVipAmount * 100}%` }"></div>
:style="{ width: `${tradeSale.inAmount ? (tradeSale.outAmount / tradeSale.totalVipAmount * 100) : 0}%` }">
</div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
@@ -119,7 +136,7 @@
<div class="data_item">
<div class="num_wrap">
<div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
<div class="tips">会员消费（元）<el-icon class="el-icon-question" /></div>
<div class="tips">会员消费（元）</div>
</div>
</div>
<div class="data_item_right">
@@ -137,7 +154,11 @@
</div>
</div>
<div class="item item2">
<div class="title">翻台率 <el-icon class="icon el-icon-question" /> </div>
<div class="title">翻台率
<el-tooltip effect="dark" content="翻台率=（客单数-桌台数）/桌台数*100%" placement="top">
<el-icon class="icon el-icon-question" />
</el-tooltip>
</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item2_icon.png" />
<div class="t">{{ tradeCount.turnoverRate }}</div>
@@ -186,7 +207,7 @@
<div class="item active">商品销售排行</div>
</div>
<el-radio-group v-model="saleTableActive" @change="rankChange">
<el-radio-button label="1">今天</el-radio-button>
<!-- <el-radio-button label="1">今天</el-radio-button> -->
<el-radio-button label="7">近7天</el-radio-button>
<el-radio-button label="30">30天</el-radio-button>
</el-radio-group>
@@ -209,10 +230,10 @@
</div>
<div class="table">
<el-table :data="saleTable" v-loading="saleTableLoading">
<el-table-column label="排名" prop="productId"></el-table-column>
<!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
<el-table-column label="商品名称" prop="productName"></el-table-column>
<el-table-column label="数量" prop="productNum"></el-table-column>
<el-table-column label="金额" prop="amount"></el-table-column>
<el-table-column label="数量" prop="salesNum"></el-table-column>
<el-table-column label="金额" prop="salesAmount"></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"
@@ -270,10 +291,10 @@ export default {
chartType: 1,
productCount: 0,
productSum: 0,
saleTableActive: "1",
saleTableActive: "7",
saleTable: [],
saleTableLoading: false,
saleTablePage: 1,
saleTablePage: 0,
saleTableTotal: 0,
saleTableSize: 5,
__resizeHandler: null,
@@ -285,7 +306,9 @@ export default {
createdAt: '',
},
tradeLoading: false,
tradeSale: '',
tradeSale: {
payCount: []
},
tradeVip: '',
tradeCount: '',
};
@@ -294,7 +317,7 @@ export default {
// this.summaryGet();
this.dateAmount();
this.dateProduct();
this.summaryDateGet();
// this.summaryDateGet();
this.timeChange('0')
this.__resizeHandler = debounce(() => {
@@ -666,7 +689,10 @@ export default {
this.payChart = echarts.init(this.$refs.payChart);
this.payChart.setOption({
tooltip: {
trigger: "item"
trigger: "item",
formatter: params => {
return `${params.name}：${params.value}笔`
}
},
legend: {
top: "5%",
@@ -734,10 +760,12 @@ export default {
this.saleTablePage,
this.saleTableSize
);
this.saleTable = res.totalProduct;
this.saleTableTotal = res.total;
this.productCount = res.productCount;
this.productSum = res.productSum;
this.saleTable = res.productList.content;
this.saleTableTotal = res.productList.totalElements;
this.productCount = res.productCount.payAmount;
this.productSum = res.productSum.payAmount;
this.summaryDateGet(res.countList)
setTimeout(() => {
this.saleTableLoading = false;
}, 300);
@@ -788,7 +816,7 @@ export default {
},
rankChange() {
this.dateProduct();
this.summaryDateGet();
// this.summaryDateGet();
},
// 初始化销售图标
initProduceChart(p1, p2) {
@@ -938,17 +966,23 @@ export default {
});
},
// 日期汇总数据
async summaryDateGet() {
async summaryDateGet(res) {
try {
const res = await summaryDateGet(this.saleTableActive);
console.log(res);
// const res = await summaryDateGet(this.saleTableActive);
let p1 = [
res.numList.map(item => item.tradeDay),
res.numList.map(item => item.count)
res.map(item => item.tradeDay),
res.map(item => item.saleNum)
];
let p2 = [
res.amountList.map(item => item.tradeDay),
res.amountList.map(item => item.count)
res.map(item => item.tradeDay),
res.map(item => item.saleAmount)
];
console.log(p1);
console.log(p2);
this.initProduceChart(p1, p2);
} catch (error) {
console.log(error);
@@ -958,7 +992,43 @@ export default {
};
</script>
<style>
.popper {
border: 1px solid #D9D9D9 !important;
}
</style>
<style scoped lang="scss">
.tips_row {
width: 300px;
padding: 0 10px;
.item {
height: 40px;
display: flex;
align-items: center;
color: #666;
justify-content: space-between;
&:not(:last-child) {
border-bottom: 1px solid #D9D9D9;
}
.left {
display: flex;
align-items: center;
.icon {
font-size: 20px;
margin-right: 10px;
}
}
.num {
color: #1890ff;
}
}
}
.app-container {
padding: 20px;
background-color: #f5f5f5;