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

1.优化后台样式

Browse Source 
2.改版并对接新版数据统计页面
This commit is contained in:
gyq
2024-09-12 08:53:44 +08:00
parent a81c8b8352
commit 24d6a192b1
24 changed files with 1837 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<template>
<div class="app-container" style="padding-bottom: 100px;">
<div class="card_wrap">
<!-- <div class="card_wrap">
<div class="card">
<div class="header">
<div class="card_title">总销售额</div>
@@ -44,30 +44,143 @@
<i class="icon el-icon-caret-top"></i>
</div>
</div>
</div> -->
<div class="h_card_wrap">
<div class="status_wrap">
<div class="left">
<div class="dot"></div>
<span>营业</span>
</div>
<div class="time_wrap">
<el-radio-group v-model="timeValue" @change="timeChange">
<el-radio-button label="0">今天</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-button label="week">本周</el-radio-button>
<el-radio-button label="month">本月</el-radio-button>
<el-radio-button label="custom">自定义</el-radio-button>
</el-radio-group>
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
v-if="timeValue == 'custom'" @change="summarytrade">
</el-date-picker>
</div>
</div>
<div class="content" v-loading="tradeLoading">
<div class="top">
<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>
<div class="line_wrap">
<div class="line_item">
<div class="line_item_top">
<div>销售金额（元）</div>
<div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div>
</div>
<div class="line_gropress">
<div class="gropress l"
:style="{ width: `${tradeSale.incomeAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
<div class="gropress r"
:style="{ width: `${tradeSale.refundAmount / tradeSale.totalSaleAmount * 100}%` }"></div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
<div class="info">
<span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
<span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
</div>
</div>
</div>
<div class="line_item">
<div class="line_item_top">
<div>充值金额（元）</div>
<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>
<div class="gropress r"
:style="{ width: `${tradeSale.outAmount / tradeSale.totalVipAmount * 100}%` }"></div>
</div>
<div class="line_btm">
<el-icon class="icon el-icon-caret-right" />
<div class="info">
<span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
<span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="item data">
<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>
</div>
<div class="data_item_right">
<div class="t"><span>新增会员数</span> <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span></div>
<div class="t"><span>会员消费笔数</span> <span class="n">{{ tradeVip.useNum || 0 }}</span></div>
</div>
</div>
</div>
<div class="btm">
<div class="item item1">
<div class="title">客单价</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item1_icon.png" />
<div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
</div>
</div>
<div class="item item2">
<div class="title">翻台率 <el-icon class="icon el-icon-question" /> </div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item2_icon.png" />
<div class="t">{{ tradeCount.turnoverRate }}</div>
</div>
</div>
<div class="item item3">
<div class="title">优惠金额</div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item3_icon.png" />
<div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
</div>
</div>
<div class="item item4">
<div class="title">优惠笔数 </div>
<div class="icon_wrap">
<img class="img" src="@/assets/images/data_home_item4_icon.png" />
<div class="t">{{ tradeCount.saveNum || 0 }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- 销售额 -->
<div class="chart_wrap">
<div class="chart_wrap" style="display: flex;">
<div class="item">
<div class="header">
<div class="tab_wrap">
<div class="item active">销售额</div>
<div class="item" :class="{ active: lineChartType == 0 }" @click="lineChartTypeChange(0)">销售趋势</div>
<div class="item" :class="{ active: lineChartType == 1 }" @click="lineChartTypeChange(1)">支付占比</div>
</div>
<el-radio-group v-model="saleActive" @change="dateAmount">
<el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
<el-radio-button label="7">近7天</el-radio-button>
<el-radio-button label="30">30天</el-radio-button>
</el-radio-group>
</div>
<div
class="chart"
ref="saleChart"
v-loading="saleLoading"
style="height: 400px;"
></div>
<div class="chart" ref="saleChart" v-loading="saleLoading" style="height: 400px;" v-show="lineChartType == 0">
</div>
<div class="chart" ref="payChart" v-loading="payChartLoading" style="height: 400px;"
v-show="lineChartType == 1">
</div>
</div>
</div>
<div class="chart_wrap" style="display: flex;">
<!-- 商品销售排行 -->
<div class="item">
<div class="item" style="margin-left: 20px;">
<div class="header">
<div class="tab_wrap">
<div class="item active">商品销售排行</div>
@@ -97,28 +210,18 @@
<div class="table">
<el-table :data="saleTable" v-loading="saleTableLoading">
<el-table-column label="排名" prop="productId"></el-table-column>
<el-table-column
label="商品名称"
prop="productName"
></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>
<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>
<!-- 支付类型占比 -->
</div>
<!-- <div class="chart_wrap" style="display: flex;">
<div class="item" style="margin-left: 20px;">
<div class="header">
<div class="tab_wrap">
@@ -129,13 +232,9 @@
<el-radio-button label="30">30天</el-radio-button>
</el-radio-group>
</div>
<div
style="height: 400px;margin-top: 30px;"
ref="payChart"
v-loading="payChartLoading"
></div>
<div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
</div>
</div>
</div> -->
</div>
</template>
@@ -146,14 +245,17 @@ import {
dateProduct,
dateAmount,
datePayType,
summaryDateGet
summaryDateGet,
summarytrade
} from "@/api/home";
import dayjs from 'dayjs'
import echarts from "echarts";
import { debounce } from "@/utils";
import { debounce, formatDecimal } from "@/utils";
export default {
name: "home",
data() {
return {
formatDecimal,
topData: "",
saleTab: "sale",
saleActive: "7",
@@ -176,15 +278,24 @@ export default {
saleTableSize: 5,
__resizeHandler: null,
productCountChart: null,
productSumChart: null
productSumChart: null,
lineChartType: 0,
timeValue: "0",
query: {
createdAt: '',
},
tradeLoading: false,
tradeSale: '',
tradeVip: '',
tradeCount: '',
};
},
mounted() {
this.summaryGet();
// this.summaryGet();
this.dateAmount();
this.dateProduct();
this.datePayType();
this.summaryDateGet();
this.timeChange('0')
this.__resizeHandler = debounce(() => {
if (this.saleChart) {
@@ -207,9 +318,110 @@ export default {
}
}, 100);
window.addEventListener("resize", this.__resizeHandler);
this.initCardUserChart();
// this.initCardUserChart();
},
methods: {
// 切换时间
timeChange(e) {
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
switch (e) {
case "":
// 全部
this.query.createdAt = [];
break;
case "0":
// 今天
this.query.createdAt = [
dayjs().format(format[0]),
dayjs().format(format[1])
];
break;
case "-1":
// 昨天
this.query.createdAt = [
dayjs()
.add(-1, "d")
.format(format[0]),
dayjs()
.add(-1, "d")
.format(format[1])
];
break;
case "-7":
// 最近7天
this.query.createdAt = [
dayjs()
.add(-7, "d")
.format(format[0]),
dayjs().format(format[1])
];
break;
case "-30":
// 最近7天
this.query.createdAt = [
dayjs()
.add(-30, "d")
.format(format[0]),
dayjs().format(format[1])
];
break;
case "week":
// 本周
this.query.createdAt = [
dayjs()
.startOf("week")
.format(format[0]),
dayjs()
.endOf("week")
.format(format[1])
];
break;
case "month":
// 本周
this.query.createdAt = [
dayjs()
.startOf("month")
.format(format[0]),
dayjs()
.endOf("month")
.format(format[1])
];
break;
case "custom":
// 自定义
this.query.createdAt = [];
break;
default:
break;
}
if (e != 'custom') {
this.summarytrade()
}
},
// 获取营业板块数据
async summarytrade() {
try {
this.tradeLoading = true
const res = await summarytrade({
startTime: this.query.createdAt[0],
endTime: this.query.createdAt[1]
})
this.tradeLoading = false
this.tradeSale = res.sale
this.tradeVip = res.vip
this.tradeCount = res.count
} catch (error) {
console.log(error);
}
},
lineChartTypeChange(i) {
this.lineChartType = i
if (i == 0) {
this.dateAmount()
} else {
this.datePayType();
}
},
// 初始化支付笔数柱状图
initCardPayChart(time = [], data = []) {
this.cardPayChart = echarts.init(this.$refs.cardPayChart);
@@ -537,7 +749,7 @@ export default {
async datePayType() {
try {
this.payChartLoading = true;
const res = await datePayType(this.payChartDay);
const res = await datePayType(this.saleActive);
const data = res.countPayType.map(item => {
return {
value: item.count,
@@ -752,6 +964,232 @@ export default {
background-color: #f5f5f5;
}
.h_card_wrap {
.status_wrap {
display: flex;
align-items: center;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
background-color: #1890ff;
margin-right: 10px;
}
}
.time {
display: flex;
align-items: center;
}
}
.content {
background-color: #fff;
margin-top: 15px;
padding: 20px;
.top {
display: flex;
.item {
flex: 1;
&.earnings {
display: flex;
}
&.data {
margin-left: 40px;
background: url('../../assets/images/data_home_bg1.png') no-repeat center center / cover;
display: flex;
align-items: center;
}
.data_item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.data_item_right {
flex: 1;
display: flex;
flex-direction: column;
.t {
width: 200px;
color: #333;
display: flex;
justify-content: space-between;
&:not(:first-child) {
margin-top: 20px;
}
}
.n {
color: #1890ff;
margin-left: 20px;
}
}
.num_wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.num {
font-size: 30px;
color: #1890ff;
}
.tips {
font-size: 12px;
margin-top: 10px;
}
}
.line_wrap {
flex: 1;
padding-left: 20px;
.line_item {
&:not(:first-child) {
margin-top: 20px;
}
.line_item_top {
display: flex;
justify-content: space-between;
font-size: 12px;
.t {
color: #999;
}
}
.line_gropress {
display: flex;
margin-top: 6px;
background-color: #F6F6F6;
.gropress {
height: 5px;
&.l {
background-color: #1890ff;
}
&.r {
background-color: #FF3F3F;
}
}
}
.line_btm {
display: flex;
justify-content: space-between;
margin-top: 5px;
.icon {
color: #A2A2A2;
position: relative;
left: -5px;
font-size: 12px;
}
.info {
font-size: 12px;
.l_t {
color: #1890ff;
}
.l_r {
color: #FF3F3F;
margin-left: 10px;
}
}
}
}
}
}
}
.btm {
display: flex;
justify-content: space-between;
margin-top: 20px;
.item {
width: 200px;
height: 83px;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 18px;
&.item1 {
background-image: url('../../assets/images/data_home_item1.png');
}
&.item2 {
background-image: url('../../assets/images/data_home_item2.png');
}
&.item3 {
background-image: url('../../assets/images/data_home_item3.png');
}
&.item4 {
background-image: url('../../assets/images/data_home_item4.png');
}
.title {
display: flex;
align-items: center;
color: #333;
.icon {
font-size: 12px;
color: #999;
margin-left: 6px;
}
}
.icon_wrap {
display: flex;
align-items: center;
margin-top: 10px;
.img {
width: 36px;
height: 36px;
}
.t {
font-size: 24px;
margin-left: 10px;
}
}
}
}
}
}
.card_wrap {
display: flex;
flex-wrap: wrap;
@@ -868,10 +1306,11 @@ export default {
align-items: center;
justify-content: center;
font-size: 14px;
color: $color;
margin-right: 20px;
&.active {
position: relative;
color: $color;
&::after {
content: "";