mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
Merge branch 'master' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui
This commit is contained in:
田香琪
161
manager/src/views/statistics/data-report.vue
Normal file
161
manager/src/views/statistics/data-report.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="data-report">
|
||||
<el-card>
|
||||
<h4 class="page-title">数据报表</h4>
|
||||
<p class="page-desc">选择报表模块查看销售数据统计与分析</p>
|
||||
<div class="module-grid">
|
||||
<div
|
||||
v-for="item in modules"
|
||||
:key="item.name"
|
||||
class="module-card"
|
||||
@click="goReport(item.name)"
|
||||
>
|
||||
<div class="module-icon">
|
||||
<el-icon :size="32">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="module-body">
|
||||
<div class="module-title">{{ item.title }}</div>
|
||||
<div class="module-desc">{{ item.desc }}</div>
|
||||
</div>
|
||||
<el-icon class="module-arrow"><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
ArrowRight,
|
||||
DataAnalysis,
|
||||
Document,
|
||||
Goods,
|
||||
TrendCharts,
|
||||
} from "@element-plus/icons-vue";
|
||||
|
||||
const REPORT_MODULES = [
|
||||
{
|
||||
name: "storePerformanceReport",
|
||||
title: "店铺业绩报表",
|
||||
desc: "支付金额、营业额、转化率及同环比分析",
|
||||
icon: TrendCharts,
|
||||
},
|
||||
{
|
||||
name: "goodsComparisonReport",
|
||||
title: "商品同比环比报表",
|
||||
desc: "商品销售金额、销量占比及同环比对比",
|
||||
icon: DataAnalysis,
|
||||
},
|
||||
{
|
||||
name: "salesOrderDetailReport",
|
||||
title: "销售订单明细报表",
|
||||
desc: "订单流水、收款明细与优惠明细",
|
||||
icon: Document,
|
||||
},
|
||||
{
|
||||
name: "goodsSalesSummaryReport",
|
||||
title: "商品销售汇总报表",
|
||||
desc: "商品销量、净销售额及优惠汇总",
|
||||
icon: Goods,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "data-report",
|
||||
components: {
|
||||
ArrowRight,
|
||||
TrendCharts,
|
||||
DataAnalysis,
|
||||
Document,
|
||||
Goods,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modules: REPORT_MODULES,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goReport(name) {
|
||||
this.$router.push({ name });
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.data-report {
|
||||
.page-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.page-desc {
|
||||
margin: 0 0 20px;
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.module-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.module-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--el-color-primary-light-5);
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.module-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.module-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.module-title {
|
||||
margin-bottom: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.module-desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.module-arrow {
|
||||
color: #c0c4cc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
manager/src/views/statistics/deposit.vue
Normal file
148
manager/src/views/statistics/deposit.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-card class="card">
|
||||
<h4>储值余额分布</h4>
|
||||
<div id="depositBalanceChart"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>充值次数分布</h4>
|
||||
<div id="depositTimesChart"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>充值金额分布</h4>
|
||||
<div id="depositAmountChart"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { Chart } from "@antv/g2";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
balanceChart: null,
|
||||
timesChart: null,
|
||||
amountChart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.destroyCharts();
|
||||
},
|
||||
methods: {
|
||||
destroyCharts() {
|
||||
["balanceChart", "timesChart", "amountChart"].forEach((key) => {
|
||||
if (this[key]) {
|
||||
this[key].destroy();
|
||||
this[key] = null;
|
||||
}
|
||||
});
|
||||
},
|
||||
withProportion(list) {
|
||||
const rows = list || [];
|
||||
const total = rows.reduce((sum, item) => sum + (Number(item.memberNum) || 0), 0);
|
||||
return rows.map((item) => {
|
||||
const num = Number(item.memberNum) || 0;
|
||||
const proportion = total > 0 ? Math.round((num / total) * 10000) / 100 : 0;
|
||||
return {
|
||||
label: item.label,
|
||||
memberNum: num,
|
||||
proportion,
|
||||
};
|
||||
});
|
||||
},
|
||||
renderBarChart(chartKey, containerId, data, xTitle) {
|
||||
if (this[chartKey]) {
|
||||
this[chartKey].destroy();
|
||||
this[chartKey] = null;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const chart = new Chart({
|
||||
container: containerId,
|
||||
autoFit: true,
|
||||
height: 320,
|
||||
padding: [40, 40, 50, 60],
|
||||
});
|
||||
chart.data(data || []);
|
||||
chart.scale("memberNum", {
|
||||
nice: true,
|
||||
min: 0,
|
||||
alias: "客户数",
|
||||
});
|
||||
chart.axis("label", {
|
||||
title: {
|
||||
text: xTitle,
|
||||
},
|
||||
});
|
||||
chart.tooltip({
|
||||
showMarkers: false,
|
||||
shared: true,
|
||||
});
|
||||
chart
|
||||
.interval()
|
||||
.position("label*memberNum")
|
||||
.color("#409EFF")
|
||||
.label("memberNum", {
|
||||
offset: 8,
|
||||
})
|
||||
.tooltip("label*memberNum*proportion", (label, memberNum, proportion) => ({
|
||||
name: label,
|
||||
value: `${memberNum}人（${proportion}%）`,
|
||||
}));
|
||||
chart.interaction("active-region");
|
||||
chart.render();
|
||||
this[chartKey] = chart;
|
||||
});
|
||||
},
|
||||
async loadData() {
|
||||
const [balanceRes, timesRes, amountRes] = await Promise.all([
|
||||
API_Statistics.getDepositBalanceDistribution(),
|
||||
API_Statistics.getDepositRechargeTimesDistribution(),
|
||||
API_Statistics.getDepositRechargeAmountDistribution(),
|
||||
]);
|
||||
if (balanceRes && balanceRes.success) {
|
||||
this.renderBarChart(
|
||||
"balanceChart",
|
||||
"depositBalanceChart",
|
||||
this.withProportion(balanceRes.result || []),
|
||||
"余额区间(元)"
|
||||
);
|
||||
}
|
||||
if (timesRes && timesRes.success) {
|
||||
this.renderBarChart(
|
||||
"timesChart",
|
||||
"depositTimesChart",
|
||||
this.withProportion(timesRes.result || []),
|
||||
"充值次数区间"
|
||||
);
|
||||
}
|
||||
if (amountRes && amountRes.success) {
|
||||
this.renderBarChart(
|
||||
"amountChart",
|
||||
"depositAmountChart",
|
||||
this.withProportion(amountRes.result || []),
|
||||
"累计充值金额区间(元)"
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
</style>
|
||||
213
manager/src/views/statistics/distribution.vue
Normal file
213
manager/src/views/statistics/distribution.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-affix :offset="100">
|
||||
<el-card class="card fixed-bottom">
|
||||
<affixTime @selected="clickBreadcrumb" />
|
||||
</el-card>
|
||||
</el-affix>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>分销概况</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in metricDefs" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isMoney">
|
||||
{{ $filters.unitPrice(overview[item.key] || 0, "￥") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatNumber(overview[item.key]) }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>分销排行</h4>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">TOP分销员</div>
|
||||
<el-table :data="distributorRank" stripe style="width: 100%">
|
||||
<el-table-column prop="rank" label="排名" width="70" />
|
||||
<el-table-column prop="name" label="分销员" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column label="佣金" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.amount || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="订单数" min-width="100" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">TOP分销商品</div>
|
||||
<el-table :data="goodsRank" stripe style="width: 100%">
|
||||
<el-table-column prop="rank" label="排名" width="70" />
|
||||
<el-table-column prop="name" label="商品" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="佣金" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.amount || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="销量" min-width="100" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import affixTime from "@/components/affix-time";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
components: { affixTime, QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
storeId: "",
|
||||
},
|
||||
overview: {},
|
||||
distributorRank: [],
|
||||
goodsRank: [],
|
||||
metricDefs: [
|
||||
{ key: "distributorNum", label: "分销员数", tip: "已通过审核的分销员数量" },
|
||||
{ key: "applyNum", label: "待审核分销员", tip: "申请中待审核的分销员数量" },
|
||||
{ key: "distributionOrderNum", label: "分销订单数", tip: "周期内分销订单笔数" },
|
||||
{
|
||||
key: "distributionOrderAmount",
|
||||
label: "分销订单金额",
|
||||
isMoney: true,
|
||||
tip: "周期内分销订单佣金合计",
|
||||
},
|
||||
{
|
||||
key: "settledCommission",
|
||||
label: "已结算佣金",
|
||||
isMoney: true,
|
||||
tip: "周期内已完成结算的佣金",
|
||||
},
|
||||
{
|
||||
key: "pendingCommission",
|
||||
label: "待结算佣金",
|
||||
isMoney: true,
|
||||
tip: "周期内待结算的佣金",
|
||||
},
|
||||
{
|
||||
key: "cashAmount",
|
||||
label: "提现金额",
|
||||
isMoney: true,
|
||||
tip: "周期内分销员提现金额",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.loadData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickBreadcrumb(item) {
|
||||
this.params = {
|
||||
searchType: item.searchType || "",
|
||||
year: item.year || "",
|
||||
month: item.month || "",
|
||||
storeId: item.storeId || "",
|
||||
startTime: item.startTime || "",
|
||||
endTime: item.endTime || "",
|
||||
};
|
||||
},
|
||||
formatNumber(val) {
|
||||
if (val == null || val === "") return 0;
|
||||
const num = Number(val);
|
||||
return Number.isNaN(num) ? 0 : Math.round(num);
|
||||
},
|
||||
async loadData() {
|
||||
const query = { ...this.params };
|
||||
const [overviewRes, distributorRes, goodsRes] = await Promise.all([
|
||||
API_Statistics.getDistributionOverview(query),
|
||||
API_Statistics.getDistributionRankDistributor(query),
|
||||
API_Statistics.getDistributionRankGoods(query),
|
||||
]);
|
||||
if (overviewRes && overviewRes.success) {
|
||||
this.overview = overviewRes.result || {};
|
||||
}
|
||||
if (distributorRes && distributorRes.success) {
|
||||
this.distributorRank = distributorRes.result || [];
|
||||
}
|
||||
if (goodsRes && goodsRes.success) {
|
||||
this.goodsRank = goodsRes.result || [];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
}
|
||||
.rank-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rank-title {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
287
manager/src/views/statistics/goods-comparison.vue
Normal file
287
manager/src/views/statistics/goods-comparison.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form inline class="goods-comparison-form">
|
||||
<div class="filter-row">
|
||||
<el-form-item label="时间类型">
|
||||
<el-radio-group v-model="dateType" @change="onDateTypeChange">
|
||||
<el-radio label="DAY">日</el-radio>
|
||||
<el-radio label="PERIOD">指定周期</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dateType === 'DAY'" label="日期">
|
||||
<el-date-picker
|
||||
v-model="queryDate"
|
||||
type="date"
|
||||
value-format="YYYY-MM-DD"
|
||||
placeholder="选择日期"
|
||||
style="width: 160px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-else label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="defaultTime"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<el-form-item label="商品分类">
|
||||
<el-cascader
|
||||
v-model="params.categoryId"
|
||||
:options="categoryList"
|
||||
:props="categoryProps"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="全部分类"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="品牌">
|
||||
<el-select v-model="params.brandId" clearable filterable placeholder="全部品牌" style="width: 160px">
|
||||
<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称">
|
||||
<el-input v-model="params.keyword" clearable placeholder="商品名称" style="width: 160px" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<el-form-item label="订单来源">
|
||||
<el-select v-model="params.clientType" clearable placeholder="全部来源" style="width: 140px">
|
||||
<el-option v-for="item in clientTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺">
|
||||
<el-select v-model="params.storeId" clearable filterable placeholder="全部店铺" style="width: 200px">
|
||||
<el-option v-for="item in shops" :key="item.id" :label="item.storeName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<el-form-item label="排序">
|
||||
<el-select v-model="params.sortType" style="width: 120px">
|
||||
<el-option label="按销售额" value="PRICE" />
|
||||
<el-option label="按销量" value="NUM" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt_10">
|
||||
<el-table v-loading="loading" border :data="data" style="width: 100%">
|
||||
<el-table-column label="序号" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
{{ (params.pageNumber - 1) * params.pageSize + $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="goodsName" label="商品名称" min-width="160" />
|
||||
<el-table-column prop="reportTime" label="时间" width="200" />
|
||||
<el-table-column label="商品销售金额" width="120" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.salesAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品销售总金额" width="130" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.totalSalesAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="占比" width="90" align="right">
|
||||
<template #default="{ row }">{{ formatPercent(row.amountPercent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环比" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.momAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环比率" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :class="rateClass(row.momRate)">{{ row.momRate || "0%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环比差额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.momDiff) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="同比" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.yoyAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="同比率" width="90" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :class="rateClass(row.yoyRate)">{{ row.yoyRate || "0%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="同比差额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.yoyDiff) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="salesNum" label="商品销售数" width="110" align="right" />
|
||||
<el-table-column label="销售占比" width="90" align="right">
|
||||
<template #default="{ row }">{{ formatPercent(row.salesNumPercent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="storeName" label="店铺名称" width="140" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageNumber"
|
||||
v-model:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="loadData"
|
||||
@size-change="loadData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { getShopListData } from "@/api/shops";
|
||||
import { getBrandListData, getCategoryTree } from "@/api/goods";
|
||||
import { downloadBlob } from "@/utils/downloadBlob";
|
||||
|
||||
const CLIENT_TYPE_OPTIONS = [
|
||||
{ label: "移动端", value: "H5" },
|
||||
{ label: "PC端", value: "PC" },
|
||||
{ label: "小程序", value: "WECHAT_MP" },
|
||||
{ label: "移动应用端", value: "APP" },
|
||||
{ label: "未知", value: "UNKNOWN" },
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "goods-comparison-report",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dateType: "DAY",
|
||||
queryDate: "",
|
||||
dateRange: [],
|
||||
defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
storeId: "",
|
||||
categoryId: "",
|
||||
brandId: "",
|
||||
clientType: "",
|
||||
keyword: "",
|
||||
sortType: "PRICE",
|
||||
},
|
||||
categoryList: [],
|
||||
categoryProps: { value: "id", label: "name", children: "children", checkStrictly: true, emitPath: false },
|
||||
brandList: [],
|
||||
clientTypeOptions: CLIENT_TYPE_OPTIONS,
|
||||
data: [],
|
||||
total: 0,
|
||||
shops: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initDefaultRange();
|
||||
this.loadOptions();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initDefaultRange() {
|
||||
const today = new Date();
|
||||
this.queryDate = this.formatDay(today);
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(start.getDate() - 6);
|
||||
this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
|
||||
},
|
||||
formatDay(date) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
},
|
||||
onDateTypeChange() {
|
||||
if (this.dateType === "DAY" && !this.queryDate) {
|
||||
this.queryDate = this.formatDay(new Date());
|
||||
}
|
||||
},
|
||||
loadOptions() {
|
||||
getCategoryTree().then((res) => {
|
||||
if (res.success) this.categoryList = res.result || [];
|
||||
});
|
||||
getBrandListData().then((res) => {
|
||||
if (res.success) this.brandList = res.result || [];
|
||||
});
|
||||
getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
|
||||
if (res.success) this.shops = res.result.records || [];
|
||||
});
|
||||
},
|
||||
formatDate(date, startOfDay) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
|
||||
},
|
||||
buildParams() {
|
||||
const p = { ...this.params, reportDateType: this.dateType };
|
||||
if (this.dateType === "DAY") {
|
||||
if (this.queryDate) {
|
||||
p.queryDate = `${this.queryDate} 00:00:00`;
|
||||
}
|
||||
} else if (this.dateRange && this.dateRange.length === 2) {
|
||||
p.startTime = this.dateRange[0];
|
||||
p.endTime = this.dateRange[1];
|
||||
}
|
||||
return p;
|
||||
},
|
||||
handleSearch() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
API_Statistics.getGoodsComparisonReport(this.buildParams()).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records || [];
|
||||
this.total = res.result.total || 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
API_Statistics.exportGoodsComparisonReport(this.buildParams()).then((blob) => {
|
||||
downloadBlob(blob, "商品同比环比报表.xlsx");
|
||||
});
|
||||
},
|
||||
formatMoney(val) {
|
||||
return this.$filters.unitPrice(val, "￥");
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
return `${Number(val).toFixed(2)}%`;
|
||||
},
|
||||
rateClass(rate) {
|
||||
if (!rate) return "";
|
||||
if (rate.startsWith("+")) return "trend-up";
|
||||
if (rate.startsWith("-") && rate !== "0%") return "trend-down";
|
||||
return "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.goods-comparison-form .filter-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.goods-comparison-form .filter-row + .filter-row {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.trend-up {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.trend-down {
|
||||
color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
160
manager/src/views/statistics/goods-sales-summary.vue
Normal file
160
manager/src/views/statistics/goods-sales-summary.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form inline>
|
||||
<el-form-item label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="defaultTime"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品关键词">
|
||||
<el-input v-model="params.keyword" clearable placeholder="商品名称" style="width: 180px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-select v-model="params.sortType" style="width: 120px">
|
||||
<el-option label="按销售额" value="PRICE" />
|
||||
<el-option label="按销量" value="NUM" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺">
|
||||
<el-select v-model="params.storeId" clearable filterable placeholder="全部店铺" style="width: 200px">
|
||||
<el-option v-for="item in shops" :key="item.id" :label="item.storeName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt_10">
|
||||
<el-table v-loading="loading" border :data="data" style="width: 100%">
|
||||
<el-table-column label="序号" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
{{ (params.pageNumber - 1) * params.pageSize + $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="goodsName" label="销售商品" min-width="160" />
|
||||
<el-table-column prop="goodsId" label="商品ID" width="140" />
|
||||
<el-table-column prop="salesNum" label="商品销售数量" width="110" />
|
||||
<el-table-column prop="salesAmount" label="商品销售金额" width="120">
|
||||
<template #default="{ row }">{{ formatMoney(row.salesAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="refundNum" label="商品退货数量" width="110" />
|
||||
<el-table-column prop="refundAmount" label="商品退款金额" width="120">
|
||||
<template #default="{ row }">{{ formatMoney(row.refundAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="netNum" label="商品净销售数量" width="140" />
|
||||
<el-table-column prop="netAmount" label="商品净销售金额" width="145">
|
||||
<template #default="{ row }">{{ formatMoney(row.netAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="netAmountPercent" label="占净销售金额百分比" width="150">
|
||||
<template #default="{ row }">{{ formatPercent(row.netAmountPercent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="avgPrice" label="商品平均单价" width="120">
|
||||
<template #default="{ row }">{{ formatMoney(row.avgPrice) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="salePriceAmount" label="商品售价金额" width="120">
|
||||
<template #default="{ row }">{{ formatMoney(row.salePriceAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="discountAmount" label="商品优惠金额" width="120">
|
||||
<template #default="{ row }">{{ formatMoney(row.discountAmount) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageNumber"
|
||||
v-model:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="loadData"
|
||||
@size-change="loadData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { getShopListData } from "@/api/shops";
|
||||
import { downloadBlob } from "@/utils/downloadBlob";
|
||||
|
||||
export default {
|
||||
name: "goods-sales-summary-report",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dateRange: [],
|
||||
defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
|
||||
params: { pageNumber: 1, pageSize: 20, storeId: "", keyword: "", sortType: "PRICE" },
|
||||
data: [],
|
||||
total: 0,
|
||||
shops: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initDefaultRange();
|
||||
this.loadShops();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initDefaultRange() {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(start.getDate() - 6);
|
||||
this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
|
||||
},
|
||||
formatDate(date, startOfDay) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
|
||||
},
|
||||
loadShops() {
|
||||
getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
|
||||
if (res.success) this.shops = res.result.records || [];
|
||||
});
|
||||
},
|
||||
buildParams() {
|
||||
const p = { ...this.params };
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
p.startTime = this.dateRange[0];
|
||||
p.endTime = this.dateRange[1];
|
||||
}
|
||||
return p;
|
||||
},
|
||||
handleSearch() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
API_Statistics.getGoodsSalesSummaryReport(this.buildParams()).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records || [];
|
||||
this.total = res.result.total || 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
API_Statistics.exportGoodsSalesSummaryReport(this.buildParams()).then((blob) => {
|
||||
downloadBlob(blob, "商品销售汇总报表.xlsx");
|
||||
});
|
||||
},
|
||||
formatMoney(val) {
|
||||
return this.$filters.unitPrice(val, "￥");
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
return `${Number(val).toFixed(2)}%`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,107 +1,293 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="wrapper">
|
||||
<el-affix :offset="100">
|
||||
<el-card class="card fixed-bottom">
|
||||
<affixTime :closeShop="true" @selected="clickBreadcrumb" />
|
||||
<affixTime @selected="clickBreadcrumb" />
|
||||
</el-card>
|
||||
</el-affix>
|
||||
|
||||
<el-card class="card">
|
||||
<el-tabs v-model="params.type" @tab-click="handleClickType">
|
||||
<el-tab-pane label="热门商品订单数量" name="NUM">
|
||||
<el-table :data="data" stripe style="width: 100%">
|
||||
<el-table-column prop="goodsName" label="商品名称" min-width="160" />
|
||||
<el-table-column prop="num" label="销售数量" min-width="120" />
|
||||
<el-table-column label="销售金额" min-width="120">
|
||||
<h4>商品概况</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in metricList" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isCount">
|
||||
{{ formatCount(item.metric) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $filters.unitPrice(metricCurrent(item.metric), "￥") }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="metric-rate" :class="rateClass(item.metric)">
|
||||
环比 {{ rateText(item.metric) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>商品排行</h4>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">退货排行榜 TOP10</div>
|
||||
<el-table :data="refundRank" stripe style="width: 100%">
|
||||
<el-table-column prop="rank" label="排名" width="70" />
|
||||
<el-table-column prop="skuName" label="商品名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="退款金额" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
|
||||
{{ $filters.unitPrice(row.amount || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="热门商品订单金额" name="PRICE">
|
||||
<el-table :data="data" stripe style="width: 100%">
|
||||
<el-table-column prop="goodsName" label="商品名称" min-width="160" />
|
||||
<el-table-column prop="num" label="销售数量" min-width="120" />
|
||||
<el-table-column label="销售金额" min-width="120">
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">畅销排行榜 TOP10</div>
|
||||
<el-table :data="salesRank" stripe style="width: 100%">
|
||||
<el-table-column prop="rank" label="排名" width="70" />
|
||||
<el-table-column prop="skuName" label="商品" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column label="净销售额" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<priceColorScheme v-if="row" :value="row.price" :color="$mainColor" />
|
||||
{{ $filters.unitPrice(row.amount || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>分类排行</h4>
|
||||
<el-table :data="categoryRank" stripe style="width: 100%">
|
||||
<el-table-column prop="rank" label="排名" width="70" />
|
||||
<el-table-column prop="categoryName" label="分类名称" min-width="180" show-overflow-tooltip />
|
||||
<el-table-column prop="num" label="销售数量" min-width="120" />
|
||||
<el-table-column label="销售金额" min-width="140">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.price || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Goods from "@/api/goods";
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import affixTime from "@/components/affix-time";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
affixTime,
|
||||
},
|
||||
components: { affixTime, QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
shopId: "",
|
||||
type: "NUM",
|
||||
storeId: "",
|
||||
},
|
||||
data: [],
|
||||
overview: {},
|
||||
refundRank: [],
|
||||
salesRank: [],
|
||||
categoryRank: [],
|
||||
metricDefs: [
|
||||
{
|
||||
key: "netSalesAmount",
|
||||
label: "商品净销售金额",
|
||||
isCount: false,
|
||||
tip: "商品净销售金额=商品销售金额-商品退款金额（扣除退款，不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "salePriceAmount",
|
||||
label: "商品售价金额",
|
||||
isCount: false,
|
||||
tip: "商品售价金额=商品净销售金额+商品优惠金额，统计时间范围内销售商品折前金额（扣除退款，不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "discountAmount",
|
||||
label: "商品优惠金额",
|
||||
isCount: false,
|
||||
tip: "统计时间范围内，商品销售时的优惠金额（扣除退款，不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "salesAmount",
|
||||
label: "商品销售金额",
|
||||
isCount: false,
|
||||
tip: "统计时间范围内，商品折扣后支付金额（不扣除退款，不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "refundAmount",
|
||||
label: "商品退款金额",
|
||||
isCount: false,
|
||||
tip: "统计时间范围内，商品成功退款金额（不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "netSalesNum",
|
||||
label: "商品净销售数量",
|
||||
isCount: true,
|
||||
tip: "商品净销售数量=商品销售数量-商品退货数量（含退款，不包含储值充值、商品返现，运费）",
|
||||
},
|
||||
{
|
||||
key: "salesNum",
|
||||
label: "商品销售数量",
|
||||
isCount: true,
|
||||
tip: "按客户支付完成时间统计的订单商品销售数量（包含商品下单，不包含储值充值）",
|
||||
},
|
||||
{
|
||||
key: "refundNum",
|
||||
label: "商品退货数量",
|
||||
isCount: true,
|
||||
tip: "按商家同意退款时间统计的退款单商品退货数量（不包含储值退款、商品返现，运费）",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClickType(tab) {
|
||||
this.params.type = tab.paneName;
|
||||
this.getData();
|
||||
},
|
||||
clickBreadcrumb(item) {
|
||||
const type = this.params.type;
|
||||
this.params = { ...item };
|
||||
this.params.type = type;
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
Promise.all([API_Goods.goodsStatistics(this.params)]).then((res) => {
|
||||
if (res[0].result) {
|
||||
this.data = res[0].result;
|
||||
}
|
||||
});
|
||||
computed: {
|
||||
metricList() {
|
||||
return this.metricDefs.map((def) => ({
|
||||
...def,
|
||||
metric: this.overview[def.key] || {},
|
||||
}));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.loadData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickBreadcrumb(item) {
|
||||
this.params = {
|
||||
searchType: item.searchType || "",
|
||||
year: item.year || "",
|
||||
month: item.month || "",
|
||||
storeId: item.storeId || "",
|
||||
startTime: item.startTime || "",
|
||||
endTime: item.endTime || "",
|
||||
};
|
||||
},
|
||||
metricCurrent(metric) {
|
||||
if (!metric || metric.current == null) return 0;
|
||||
return Number(metric.current) || 0;
|
||||
},
|
||||
formatCount(metric) {
|
||||
return Math.round(this.metricCurrent(metric));
|
||||
},
|
||||
rateText(metric) {
|
||||
if (!metric || !metric.rate) return "0%";
|
||||
return metric.rate;
|
||||
},
|
||||
rateClass(metric) {
|
||||
const trend = metric && metric.trend;
|
||||
if (trend === "UP") return "up";
|
||||
if (trend === "DOWN") return "down";
|
||||
return "flat";
|
||||
},
|
||||
async loadData() {
|
||||
const query = { ...this.params };
|
||||
const categoryQuery = { ...query, type: "PRICE" };
|
||||
const [overviewRes, refundRes, salesRes, categoryRes] = await Promise.all([
|
||||
API_Statistics.getGoodsOverview(query),
|
||||
API_Statistics.getGoodsRefundRank(query),
|
||||
API_Statistics.getGoodsSalesRank(query),
|
||||
API_Statistics.getGoodsCategoryRank(categoryQuery),
|
||||
]);
|
||||
if (overviewRes && overviewRes.success) {
|
||||
this.overview = overviewRes.result || {};
|
||||
}
|
||||
if (refundRes && refundRes.success) {
|
||||
this.refundRank = refundRes.result || [];
|
||||
}
|
||||
if (salesRes && salesRes.success) {
|
||||
this.salesRank = salesRes.result || [];
|
||||
}
|
||||
if (categoryRes && categoryRes.success) {
|
||||
const list = categoryRes.result || [];
|
||||
this.categoryRank = list.map((item, index) => ({
|
||||
...item,
|
||||
rank: index + 1,
|
||||
}));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-col {
|
||||
text-align: right;
|
||||
margin: 10px 0;
|
||||
.wrapper {
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
|
||||
.order-col {
|
||||
display: flex;
|
||||
|
||||
> div {
|
||||
margin-right: 8px;
|
||||
padding: 16px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tips {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 110px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-rate {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-rate.up {
|
||||
color: #f5222d;
|
||||
}
|
||||
.metric-rate.down {
|
||||
color: #52c41a;
|
||||
}
|
||||
.metric-rate.flat {
|
||||
color: #999;
|
||||
}
|
||||
.rank-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rank-title {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
171
manager/src/views/statistics/marketing.vue
Normal file
171
manager/src/views/statistics/marketing.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-affix :offset="100">
|
||||
<el-card class="card fixed-bottom">
|
||||
<affixTime @selected="clickBreadcrumb" />
|
||||
</el-card>
|
||||
</el-affix>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>营销活动</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in activityMetrics" :key="item.key">
|
||||
<div class="metric-label">{{ item.label }}</div>
|
||||
<div class="metric-value">{{ formatNumber(overview[item.key]) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>优惠券与优惠</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in couponMetrics" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isMoney">
|
||||
{{ $filters.unitPrice(overview[item.key] || 0, "￥") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatNumber(overview[item.key]) }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import affixTime from "@/components/affix-time";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
components: { affixTime, QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
storeId: "",
|
||||
},
|
||||
overview: {},
|
||||
activityMetrics: [
|
||||
{ key: "couponActiveNum", label: "进行中优惠券" },
|
||||
{ key: "seckillActiveNum", label: "进行中秒杀" },
|
||||
{ key: "pintuanActiveNum", label: "进行中拼团" },
|
||||
{ key: "fullDiscountActiveNum", label: "进行中满减" },
|
||||
{ key: "kanjiaActiveNum", label: "进行中砍价商品" },
|
||||
{ key: "pointsGoodsActiveNum", label: "进行中积分商品" },
|
||||
],
|
||||
couponMetrics: [
|
||||
{
|
||||
key: "couponPublishNum",
|
||||
label: "优惠券发放量",
|
||||
tip: "优惠券配置的累计发放数量",
|
||||
},
|
||||
{
|
||||
key: "couponReceivedNum",
|
||||
label: "优惠券领取量",
|
||||
tip: "客户已领取的优惠券数量",
|
||||
},
|
||||
{
|
||||
key: "couponUsedNum",
|
||||
label: "优惠券核销量",
|
||||
tip: "客户已使用的优惠券数量",
|
||||
},
|
||||
{
|
||||
key: "discountAmount",
|
||||
label: "活动优惠总额",
|
||||
isMoney: true,
|
||||
tip: "统计周期内订单产生的优惠金额合计",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.loadData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickBreadcrumb(item) {
|
||||
this.params = {
|
||||
searchType: item.searchType || "",
|
||||
year: item.year || "",
|
||||
month: item.month || "",
|
||||
storeId: item.storeId || "",
|
||||
startTime: item.startTime || "",
|
||||
endTime: item.endTime || "",
|
||||
};
|
||||
},
|
||||
formatNumber(val) {
|
||||
if (val == null || val === "") return 0;
|
||||
const num = Number(val);
|
||||
return Number.isNaN(num) ? 0 : Math.round(num);
|
||||
},
|
||||
async loadData() {
|
||||
const res = await API_Statistics.getMarketingOverview({ ...this.params });
|
||||
if (res && res.success) {
|
||||
this.overview = res.result || {};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,167 +2,311 @@
|
||||
<div class="wrapper">
|
||||
<el-affix :offset="100">
|
||||
<el-card class="card fixed-bottom">
|
||||
<affixTime :closeShop="true" @selected="clickBreadcrumb" />
|
||||
<affixTime @selected="clickBreadcrumb" />
|
||||
</el-card>
|
||||
</el-affix>
|
||||
|
||||
<el-card class="card">
|
||||
<div>
|
||||
<h4>
|
||||
客户增长趋势
|
||||
<el-button style="margin-left: 10px" size="small" @click="toggleMemberCount">
|
||||
{{ enableShowMemberCount ? "关闭" : "显示" }}用户总人数
|
||||
</el-button>
|
||||
</h4>
|
||||
<div id="orderChart"></div>
|
||||
<h4>会员概况</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in metricList" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isMoney">
|
||||
{{ $filters.unitPrice(metricCurrent(item.metric), "￥") }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatCount(item.metric) }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="metric-rate" :class="rateClass(item.metric)">
|
||||
环比 {{ rateText(item.metric) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<div>
|
||||
<h4>客户增长报表</h4>
|
||||
<el-table class="mt_10" stripe :data="data" style="width: 100%">
|
||||
<el-table-column prop="createDate" label="日期" min-width="120" sortable />
|
||||
<el-table-column prop="memberCount" label="当前会员" min-width="120" />
|
||||
<el-table-column prop="newlyAdded" label="新增会员" min-width="120" />
|
||||
<el-table-column prop="activeQuantity" label="活跃会员" min-width="120" />
|
||||
</el-table>
|
||||
<h4>会员人数趋势图</h4>
|
||||
<div id="memberTrendChart"></div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>客户分析</h4>
|
||||
<div class="analysis-grid">
|
||||
<div class="analysis-item">
|
||||
<div class="metric-label">活跃客户数</div>
|
||||
<div class="metric-value">{{ analysis.activeMemberNum || 0 }}</div>
|
||||
</div>
|
||||
<div class="analysis-item">
|
||||
<div class="metric-label">复购率</div>
|
||||
<div class="metric-value">{{ formatPercent(analysis.repurchaseRate) }}</div>
|
||||
</div>
|
||||
<div class="analysis-item">
|
||||
<div class="metric-label">新客占比</div>
|
||||
<div class="metric-value">{{ formatPercent(analysis.newCustomerRatio) }}</div>
|
||||
</div>
|
||||
<div class="analysis-item">
|
||||
<div class="metric-label">老客占比</div>
|
||||
<div class="metric-value">{{ formatPercent(analysis.oldCustomerRatio) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>客户分布</h4>
|
||||
<el-row :gutter="16">
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">性别分布</div>
|
||||
<el-table :data="genderList" stripe style="width: 100%">
|
||||
<el-table-column label="性别" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ sexText(row.sex) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="num" label="客户数" min-width="100" />
|
||||
<el-table-column label="占比" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ formatPercent(row.proportion) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12">
|
||||
<div class="rank-title">地域分布</div>
|
||||
<el-table :data="regionList" stripe style="width: 100%" max-height="360">
|
||||
<el-table-column prop="region" label="地域" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="num" label="客户数" min-width="100" />
|
||||
<el-table-column label="占比" min-width="100">
|
||||
<template #default="{ row }">
|
||||
{{ formatPercent(row.proportion) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Member from "@/api/member";
|
||||
import { Chart } from "@antv/g2";
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import affixTime from "@/components/affix-time";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
import { Chart } from "@antv/g2";
|
||||
|
||||
export default {
|
||||
components: { affixTime },
|
||||
components: { affixTime, QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
orderChart: "",
|
||||
params: {
|
||||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
shopId: "",
|
||||
storeId: "",
|
||||
},
|
||||
data: [],
|
||||
enableShowMemberCount: false,
|
||||
year: "",
|
||||
overview: {},
|
||||
analysis: {},
|
||||
genderList: [],
|
||||
regionList: [],
|
||||
trendChart: null,
|
||||
metricDefs: [
|
||||
{
|
||||
key: "totalMemberNum",
|
||||
label: "累积会员数",
|
||||
isMoney: false,
|
||||
tip: "累积会员数：合计会员数量",
|
||||
},
|
||||
{
|
||||
key: "newMemberNum",
|
||||
label: "新增会员数",
|
||||
isMoney: false,
|
||||
tip: "新增会员数：周期内新增的会员数量",
|
||||
},
|
||||
{
|
||||
key: "payMemberNum",
|
||||
label: "支付会员数",
|
||||
isMoney: false,
|
||||
tip: "支付会员数：周期内支付的会员数量",
|
||||
},
|
||||
{
|
||||
key: "rechargeMemberNum",
|
||||
label: "储值会员数",
|
||||
isMoney: false,
|
||||
tip: "储值会员数：周期内充值的会员数量",
|
||||
},
|
||||
{
|
||||
key: "payAmount",
|
||||
label: "会员支付金额",
|
||||
isMoney: true,
|
||||
tip: "会员支付金额：周期内会员支付的金额，四舍五入保留2位小数",
|
||||
},
|
||||
{
|
||||
key: "payOrderNum",
|
||||
label: "会员支付订单数",
|
||||
isMoney: false,
|
||||
tip: "会员支付订单数：周期内会员支付的订单数量",
|
||||
},
|
||||
{
|
||||
key: "customerPrice",
|
||||
label: "会员客单价",
|
||||
isMoney: true,
|
||||
tip: "会员客单价：周期内支付金额/支付人数，四舍五入保留2位小数",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
metricList() {
|
||||
return this.metricDefs.map((def) => ({
|
||||
...def,
|
||||
metric: this.overview[def.key] || {},
|
||||
}));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.init();
|
||||
this.loadData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
year(val) {
|
||||
this.params.year = new Date(val).getFullYear();
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.trendChart) {
|
||||
this.trendChart.destroy();
|
||||
this.trendChart = null;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleMemberCount() {
|
||||
this.enableShowMemberCount = !this.enableShowMemberCount;
|
||||
this.initMemberChart();
|
||||
},
|
||||
initMemberChart() {
|
||||
const count = [];
|
||||
const newly = [];
|
||||
const actives = [];
|
||||
|
||||
this.data.forEach((item) => {
|
||||
if (this.enableShowMemberCount && (item.memberCount != "" || item.memberCount != null)) {
|
||||
count.push({
|
||||
createDate: item.createDate,
|
||||
memberCount: item.memberCount,
|
||||
title: "当前会员数量",
|
||||
});
|
||||
}
|
||||
if (!this.enableShowMemberCount && (item.newlyAdded != "" || item.newlyAdded != null)) {
|
||||
newly.push({
|
||||
createDate: item.createDate,
|
||||
memberCount: item.newlyAdded,
|
||||
title: "新增会员数量",
|
||||
});
|
||||
}
|
||||
if (!this.enableShowMemberCount && (item.activeQuantity != "" || item.activeQuantity != null)) {
|
||||
actives.push({
|
||||
createDate: item.createDate,
|
||||
memberCount: item.activeQuantity,
|
||||
title: "当日活跃数量",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const chartData = [...count, ...newly, ...actives];
|
||||
|
||||
this.orderChart.data(chartData);
|
||||
this.orderChart.scale({
|
||||
activeQuantity: {
|
||||
range: [0, 1],
|
||||
nice: true,
|
||||
},
|
||||
});
|
||||
this.orderChart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
|
||||
this.orderChart
|
||||
.line()
|
||||
.position("createDate*memberCount")
|
||||
.color("title")
|
||||
.label("memberCount")
|
||||
.shape("smooth");
|
||||
|
||||
this.orderChart
|
||||
.point()
|
||||
.position("createDate*memberCount")
|
||||
.color("title")
|
||||
.label("memberCount")
|
||||
.shape("circle")
|
||||
.style({
|
||||
stroke: "#fff",
|
||||
lineWidth: 1,
|
||||
});
|
||||
this.orderChart.area().position("createDate*memberCount").color("title").shape("smooth");
|
||||
|
||||
this.orderChart.render();
|
||||
},
|
||||
clickBreadcrumb(item) {
|
||||
this.params = { ...item };
|
||||
this.params = {
|
||||
...this.params,
|
||||
searchType: item.searchType || "",
|
||||
year: item.year || "",
|
||||
month: item.month || "",
|
||||
storeId: item.storeId || "",
|
||||
startTime: item.startTime || "",
|
||||
endTime: item.endTime || "",
|
||||
};
|
||||
},
|
||||
init() {
|
||||
this.orderChart ? this.orderChart.clear() : "";
|
||||
API_Member.getMemberStatistics(this.params).then((res) => {
|
||||
if (res.result) {
|
||||
res.result.forEach((item) => {
|
||||
item.activeQuantity += "";
|
||||
metricCurrent(metric) {
|
||||
if (!metric || metric.current == null) return 0;
|
||||
return Number(metric.current) || 0;
|
||||
},
|
||||
formatCount(metric) {
|
||||
return Math.round(this.metricCurrent(metric));
|
||||
},
|
||||
rateText(metric) {
|
||||
if (!metric || !metric.rate) return "0%";
|
||||
return metric.rate;
|
||||
},
|
||||
rateClass(metric) {
|
||||
const trend = metric && metric.trend;
|
||||
if (trend === "UP") return "up";
|
||||
if (trend === "DOWN") return "down";
|
||||
return "flat";
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
const num = Number(val);
|
||||
if (Number.isNaN(num)) return val;
|
||||
return `${num}%`;
|
||||
},
|
||||
sexText(sex) {
|
||||
if (sex === 1 || sex === "1") return "男";
|
||||
if (sex === 0 || sex === "0") return "女";
|
||||
return "未知";
|
||||
},
|
||||
formatTrendDate(val) {
|
||||
if (!val) return "";
|
||||
if (typeof val === "string") return val.slice(0, 10);
|
||||
const d = new Date(val);
|
||||
if (Number.isNaN(d.getTime())) return String(val);
|
||||
const m = `${d.getMonth() + 1}`.padStart(2, "0");
|
||||
const day = `${d.getDate()}`.padStart(2, "0");
|
||||
return `${d.getFullYear()}-${m}-${day}`;
|
||||
},
|
||||
renderTrendChart(list) {
|
||||
const chartData = (list || []).map((item) => ({
|
||||
date: this.formatTrendDate(item.date),
|
||||
newlyAdded: Number(item.newlyAdded) || 0,
|
||||
title: "新增会员数",
|
||||
}));
|
||||
if (this.trendChart) {
|
||||
this.trendChart.destroy();
|
||||
this.trendChart = null;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.trendChart = new Chart({
|
||||
container: "memberTrendChart",
|
||||
autoFit: true,
|
||||
height: 360,
|
||||
padding: [40, 40, 50, 50],
|
||||
});
|
||||
this.trendChart.data(chartData);
|
||||
this.trendChart.scale({
|
||||
newlyAdded: {
|
||||
nice: true,
|
||||
min: 0,
|
||||
},
|
||||
});
|
||||
this.trendChart.tooltip({
|
||||
showCrosshairs: true,
|
||||
shared: true,
|
||||
});
|
||||
this.trendChart
|
||||
.line()
|
||||
.position("date*newlyAdded")
|
||||
.color("title")
|
||||
.shape("smooth");
|
||||
this.trendChart
|
||||
.point()
|
||||
.position("date*newlyAdded")
|
||||
.color("title")
|
||||
.shape("circle")
|
||||
.style({
|
||||
stroke: "#fff",
|
||||
lineWidth: 1,
|
||||
});
|
||||
this.data = res.result;
|
||||
|
||||
if (!this.orderChart) {
|
||||
this.orderChart = new Chart({
|
||||
container: "orderChart",
|
||||
autoFit: true,
|
||||
height: 500,
|
||||
padding: [70, 70, 70, 70],
|
||||
});
|
||||
}
|
||||
this.initMemberChart();
|
||||
}
|
||||
this.trendChart.render();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.year = new Date();
|
||||
async loadData() {
|
||||
const query = { ...this.params };
|
||||
const [overviewRes, analysisRes, genderRes, regionRes, trendRes] = await Promise.all([
|
||||
API_Statistics.getMemberOverview(query),
|
||||
API_Statistics.getMemberAnalysis(query),
|
||||
API_Statistics.getMemberGenderDistribution(),
|
||||
API_Statistics.getMemberRegionDistribution(),
|
||||
API_Statistics.getMemberNewTrend(query),
|
||||
]);
|
||||
if (overviewRes && overviewRes.success) {
|
||||
this.overview = overviewRes.result || {};
|
||||
}
|
||||
if (analysisRes && analysisRes.success) {
|
||||
this.analysis = analysisRes.result || {};
|
||||
}
|
||||
if (genderRes && genderRes.success) {
|
||||
this.genderList = genderRes.result || [];
|
||||
}
|
||||
if (regionRes && regionRes.success) {
|
||||
this.regionList = regionRes.result || [];
|
||||
}
|
||||
if (trendRes && trendRes.success) {
|
||||
this.renderTrendChart(trendRes.result || []);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 200px;
|
||||
@@ -170,7 +314,67 @@ export default {
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid,
|
||||
.analysis-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item,
|
||||
.analysis-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 110px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-rate {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-rate.up {
|
||||
color: #f5222d;
|
||||
}
|
||||
.metric-rate.down {
|
||||
color: #52c41a;
|
||||
}
|
||||
.metric-rate.flat {
|
||||
color: #999;
|
||||
}
|
||||
.rank-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid,
|
||||
.analysis-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.rank-title {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
351
manager/src/views/statistics/overview.vue
Normal file
351
manager/src/views/statistics/overview.vue
Normal file
@@ -0,0 +1,351 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-affix :offset="100">
|
||||
<el-card class="card fixed-bottom">
|
||||
<affixTime @selected="clickBreadcrumb" />
|
||||
</el-card>
|
||||
</el-affix>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>营业概况</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in metricList" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isCount">
|
||||
{{ formatCount(item.metric) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ $filters.unitPrice(metricCurrent(item.metric), "￥") }}
|
||||
</template>
|
||||
</div>
|
||||
<div class="metric-rate" :class="rateClass(item.metric)">
|
||||
环比 {{ rateText(item.metric) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>收款构成</h4>
|
||||
<el-table :data="sourceList" stripe style="width: 100%">
|
||||
<el-table-column prop="payType" label="支付方式" min-width="120" />
|
||||
<el-table-column label="收款合计" min-width="140">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.total || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="营业收入" min-width="140">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.income || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="新增储值金额" min-width="140">
|
||||
<template #default="{ row }">
|
||||
{{ $filters.unitPrice(row.recharge || 0, "￥") }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>营业构成</h4>
|
||||
<div class="composition-sections">
|
||||
<div class="composition-block">
|
||||
<div class="block-title">订单分类构成</div>
|
||||
<div class="block-row">
|
||||
<span>到店自提</span>
|
||||
<span>{{ $filters.unitPrice(composition.storeSelf || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>快递发货</span>
|
||||
<span>{{ $filters.unitPrice(composition.express || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>线上无需配送</span>
|
||||
<span>{{ $filters.unitPrice(composition.online || 0, "￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composition-block">
|
||||
<div class="block-title">营业收入</div>
|
||||
<div class="block-row">
|
||||
<span>商品销售</span>
|
||||
<span>{{ $filters.unitPrice(composition.income || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>运费</span>
|
||||
<span>{{ $filters.unitPrice(composition.freight || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>商品返现（分销返佣）</span>
|
||||
<span>{{ $filters.unitPrice(composition.incomeBack || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>商品销售+费用构成</span>
|
||||
<span>{{ $filters.unitPrice(composition.incomeComposition || 0, "￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composition-block">
|
||||
<div class="block-title">退款统计</div>
|
||||
<div class="block-row">
|
||||
<span>退款订单笔数</span>
|
||||
<span>{{ composition.refundOrderNum || 0 }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>退款金额</span>
|
||||
<span>{{ $filters.unitPrice(composition.refund || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>退款率</span>
|
||||
<span>{{ formatPercent(composition.refundRate) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composition-block">
|
||||
<div class="block-title">消费指标</div>
|
||||
<div class="block-row">
|
||||
<span>支付金额</span>
|
||||
<span>{{ $filters.unitPrice(composition.pay || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>折后笔单价</span>
|
||||
<span>{{ $filters.unitPrice(composition.price || 0, "￥") }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>支付人数</span>
|
||||
<span>{{ composition.payNum || 0 }}</span>
|
||||
</div>
|
||||
<div class="block-row">
|
||||
<span>折后客单价</span>
|
||||
<span>{{ $filters.unitPrice(composition.priceNum || 0, "￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import affixTime from "@/components/affix-time";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
components: { affixTime, QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
params: {
|
||||
searchType: "LAST_SEVEN",
|
||||
year: "",
|
||||
month: "",
|
||||
storeId: "",
|
||||
},
|
||||
overview: {},
|
||||
sourceList: [],
|
||||
composition: {},
|
||||
metricDefs: [
|
||||
{
|
||||
key: "income",
|
||||
label: "营业收入",
|
||||
isCount: false,
|
||||
tip: "营业收入：订单扣除退款折扣后金额（不含储值充值）",
|
||||
},
|
||||
{
|
||||
key: "turnover",
|
||||
label: "营业额",
|
||||
isCount: false,
|
||||
tip: "营业额：营业额=营业收入+优惠金额，订单扣除退款折扣前金额（不含储值充值）",
|
||||
},
|
||||
{
|
||||
key: "discount",
|
||||
label: "优惠金额",
|
||||
isCount: false,
|
||||
tip: "优惠金额：订单的优惠金额（扣除退款，不含储值充值）",
|
||||
},
|
||||
{
|
||||
key: "incomeNoStoreValue",
|
||||
label: "营业收入不含充值",
|
||||
isCount: false,
|
||||
tip: "营业收入不含储值金额：订单扣除退款折扣后金额（不含储值充值）",
|
||||
},
|
||||
{
|
||||
key: "payOrderNum",
|
||||
label: "支付订单数",
|
||||
isCount: true,
|
||||
tip: "支付订单数：按客户支付完成时间统计的成功付款的订单数（不含退款、储值充值）",
|
||||
},
|
||||
{
|
||||
key: "recharge",
|
||||
label: "新增充值金额",
|
||||
isCount: false,
|
||||
tip: "新增充值金额：按客户支付完成时间统计的客户储值充值本金金额",
|
||||
},
|
||||
{
|
||||
key: "rechargeUse",
|
||||
label: "使用充值金额",
|
||||
isCount: false,
|
||||
tip: "使用储值支付本金金额：统计时间范围内，支付和退款成功的订单中，使用储值支付且扣除退款的金额",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
metricList() {
|
||||
return this.metricDefs.map((def) => ({
|
||||
...def,
|
||||
metric: this.overview[def.key] || {},
|
||||
}));
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler() {
|
||||
this.loadData();
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickBreadcrumb(item) {
|
||||
this.params = {
|
||||
searchType: item.searchType || "",
|
||||
year: item.year || "",
|
||||
month: item.month || "",
|
||||
storeId: item.storeId || "",
|
||||
};
|
||||
},
|
||||
metricCurrent(metric) {
|
||||
if (!metric || metric.current == null) return 0;
|
||||
return Number(metric.current) || 0;
|
||||
},
|
||||
formatCount(metric) {
|
||||
return Math.round(this.metricCurrent(metric));
|
||||
},
|
||||
rateText(metric) {
|
||||
if (!metric || !metric.rate) return "0%";
|
||||
return metric.rate;
|
||||
},
|
||||
rateClass(metric) {
|
||||
const trend = metric && metric.trend;
|
||||
if (trend === "UP") return "up";
|
||||
if (trend === "DOWN") return "down";
|
||||
return "flat";
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
const num = Number(val);
|
||||
if (Number.isNaN(num)) return val;
|
||||
return `${num}%`;
|
||||
},
|
||||
async loadData() {
|
||||
const query = { ...this.params };
|
||||
const [overviewRes, sourceRes, compositionRes] = await Promise.all([
|
||||
API_Statistics.getBusinessOverview(query),
|
||||
API_Statistics.getBusinessSource(query),
|
||||
API_Statistics.getBusinessComposition(query),
|
||||
]);
|
||||
if (overviewRes && overviewRes.success) {
|
||||
this.overview = overviewRes.result || {};
|
||||
}
|
||||
if (sourceRes && sourceRes.success) {
|
||||
this.sourceList = sourceRes.result || [];
|
||||
}
|
||||
if (compositionRes && compositionRes.success) {
|
||||
this.composition = compositionRes.result || {};
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 200px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 110px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.metric-rate {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.metric-rate.up {
|
||||
color: #f5222d;
|
||||
}
|
||||
.metric-rate.down {
|
||||
color: #52c41a;
|
||||
}
|
||||
.metric-rate.flat {
|
||||
color: #999;
|
||||
}
|
||||
.composition-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.composition-block {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
.block-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.block-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
font-size: 14px;
|
||||
border-bottom: 1px dashed #e5e5e5;
|
||||
}
|
||||
.block-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.composition-sections {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
202
manager/src/views/statistics/points.vue
Normal file
202
manager/src/views/statistics/points.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<el-card class="card">
|
||||
<h4>积分分析</h4>
|
||||
<div class="metric-grid">
|
||||
<div class="metric-item" v-for="item in metricList" :key="item.key">
|
||||
<div class="metric-label">
|
||||
<span>{{ item.label }}</span>
|
||||
<el-tooltip v-if="item.tip" :content="item.tip" placement="top">
|
||||
<el-icon class="metric-tip"><QuestionFilled /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="metric-value">
|
||||
<template v-if="item.isRate">
|
||||
{{ formatPercent(overview[item.key]) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatNumber(overview[item.key]) }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>客户可用积分分布</h4>
|
||||
<el-table :data="distributionList" stripe style="width: 100%">
|
||||
<el-table-column prop="pointRange" label="积分值区间" min-width="140" />
|
||||
<el-table-column prop="memberNum" label="客户数" min-width="120" />
|
||||
<el-table-column label="占比" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ formatPercent(row.proportion) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>积分累计分发分布</h4>
|
||||
<el-table :data="sourceList" stripe style="width: 100%">
|
||||
<el-table-column prop="sourceName" label="发放途径" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column prop="point" label="发送积分值" min-width="140" />
|
||||
<el-table-column label="发送占比" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ formatPercent(row.proportion) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<el-card class="card">
|
||||
<h4>客户身份积分累计统计</h4>
|
||||
<el-table :data="identityList" stripe style="width: 100%">
|
||||
<el-table-column prop="identity" label="客户身份" min-width="140" show-overflow-tooltip />
|
||||
<el-table-column prop="totalIssued" label="累计发送积分" min-width="130" />
|
||||
<el-table-column prop="usedPoint" label="累计消耗积分" min-width="130" />
|
||||
<el-table-column prop="available" label="可用积分" min-width="120" />
|
||||
<el-table-column label="可用积分占比" min-width="120">
|
||||
<template #default="{ row }">
|
||||
{{ formatPercent(row.proportion) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="人均可用积分" min-width="130">
|
||||
<template #default="{ row }">
|
||||
{{ formatNumber(row.avgAvailable) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { QuestionFilled } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
components: { QuestionFilled },
|
||||
data() {
|
||||
return {
|
||||
overview: {},
|
||||
distributionList: [],
|
||||
sourceList: [],
|
||||
identityList: [],
|
||||
metricDefs: [
|
||||
{
|
||||
key: "totalIssued",
|
||||
label: "累积发放积分",
|
||||
isRate: false,
|
||||
tip: "累积发放积分：历史累计发放给客户的积分总数",
|
||||
},
|
||||
{
|
||||
key: "availablePoint",
|
||||
label: "可用积分",
|
||||
isRate: false,
|
||||
tip: "可用积分：当前客户账户中尚未消耗的积分总和",
|
||||
},
|
||||
{
|
||||
key: "usedPoint",
|
||||
label: "累积消耗积分",
|
||||
isRate: false,
|
||||
tip: "累积消耗积分：历史累计已消耗的积分",
|
||||
},
|
||||
{
|
||||
key: "usedRate",
|
||||
label: "积分消耗率",
|
||||
isRate: true,
|
||||
tip: "积分消耗率：累积消耗积分 / 累积发放积分",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
metricList() {
|
||||
return this.metricDefs;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
formatNumber(val) {
|
||||
if (val == null || val === "") return 0;
|
||||
const num = Number(val);
|
||||
if (Number.isNaN(num)) return val;
|
||||
return Math.round(num * 100) / 100;
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
const num = Number(val);
|
||||
if (Number.isNaN(num)) return val;
|
||||
return `${num}%`;
|
||||
},
|
||||
async loadData() {
|
||||
const [overviewRes, distributionRes, sourceRes, identityRes] = await Promise.all([
|
||||
API_Statistics.getPointsOverview(),
|
||||
API_Statistics.getPointsDistribution(),
|
||||
API_Statistics.getPointsSourceDistribution(),
|
||||
API_Statistics.getPointsIdentityStat(),
|
||||
]);
|
||||
if (overviewRes && overviewRes.success) {
|
||||
this.overview = overviewRes.result || {};
|
||||
}
|
||||
if (distributionRes && distributionRes.success) {
|
||||
this.distributionList = distributionRes.result || [];
|
||||
}
|
||||
if (sourceRes && sourceRes.success) {
|
||||
this.sourceList = sourceRes.result || [];
|
||||
}
|
||||
if (identityRes && identityRes.success) {
|
||||
this.identityList = identityRes.result || [];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.wrapper {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
.metric-item {
|
||||
background: #f3f5f7;
|
||||
border-radius: 8px;
|
||||
padding: 20px 16px;
|
||||
min-height: 90px;
|
||||
}
|
||||
.metric-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.metric-tip {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-value {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: $theme_color;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
165
manager/src/views/statistics/sales-order-detail.vue
Normal file
165
manager/src/views/statistics/sales-order-detail.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form inline>
|
||||
<el-form-item label="发生日期">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="defaultTime"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单号">
|
||||
<el-input v-model="params.orderSn" clearable placeholder="订单编号" style="width: 160px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="买家">
|
||||
<el-input v-model="params.memberName" clearable placeholder="买家名称" style="width: 140px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品关键词">
|
||||
<el-input v-model="params.keyword" clearable placeholder="商品名称" style="width: 160px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺">
|
||||
<el-select v-model="params.storeId" clearable filterable placeholder="全部店铺" style="width: 180px">
|
||||
<el-option v-for="item in shops" :key="item.id" :label="item.storeName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt_10">
|
||||
<el-table v-loading="loading" border :data="data" style="width: 100%">
|
||||
<el-table-column label="序号" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
{{ (params.pageNumber - 1) * params.pageSize + $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderRefundSn" label="订单编号|售后单号" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="occurTime" label="发生时间" width="160" />
|
||||
<el-table-column prop="flowTypeName" label="交易类型" width="90" />
|
||||
<el-table-column prop="num" label="成交数量" width="90" align="right" />
|
||||
<el-table-column label="成交金额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.transactionAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="售价金额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.salePriceAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠金额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.discountAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="paymentDetail" label="收款明细" width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="discountDetail" label="优惠明细" min-width="160" show-overflow-tooltip />
|
||||
<el-table-column label="订单来源" width="100">
|
||||
<template #default="{ row }">{{ clientTypeText(row.clientType) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageNumber"
|
||||
v-model:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="loadData"
|
||||
@size-change="loadData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { getShopListData } from "@/api/shops";
|
||||
import { downloadBlob } from "@/utils/downloadBlob";
|
||||
|
||||
export default {
|
||||
name: "sales-order-detail-report",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dateRange: [],
|
||||
defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
storeId: "",
|
||||
orderSn: "",
|
||||
memberName: "",
|
||||
keyword: "",
|
||||
},
|
||||
data: [],
|
||||
total: 0,
|
||||
shops: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initDefaultRange();
|
||||
this.loadShops();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initDefaultRange() {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(start.getDate() - 6);
|
||||
this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
|
||||
},
|
||||
formatDate(date, startOfDay) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
|
||||
},
|
||||
loadShops() {
|
||||
getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
|
||||
if (res.success) this.shops = res.result.records || [];
|
||||
});
|
||||
},
|
||||
buildParams() {
|
||||
const p = { ...this.params };
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
p.startTime = this.dateRange[0];
|
||||
p.endTime = this.dateRange[1];
|
||||
}
|
||||
return p;
|
||||
},
|
||||
handleSearch() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
API_Statistics.getSalesOrderDetailReport(this.buildParams()).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records || [];
|
||||
this.total = res.result.total || 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
API_Statistics.exportSalesOrderDetailReport(this.buildParams()).then((blob) => {
|
||||
downloadBlob(blob, "销售订单明细报表.xlsx");
|
||||
});
|
||||
},
|
||||
formatMoney(val) {
|
||||
return this.$filters.unitPrice(val, "￥");
|
||||
},
|
||||
clientTypeText(val) {
|
||||
const map = {
|
||||
H5: "移动端",
|
||||
PC: "PC端",
|
||||
WECHAT_MP: "小程序",
|
||||
APP: "移动应用端",
|
||||
UNKNOWN: "未知",
|
||||
};
|
||||
return map[val] || val || "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
185
manager/src/views/statistics/store-performance.vue
Normal file
185
manager/src/views/statistics/store-performance.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="search">
|
||||
<el-card>
|
||||
<el-form inline>
|
||||
<el-form-item label="日期范围">
|
||||
<el-date-picker
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:default-time="defaultTime"
|
||||
start-placeholder="开始"
|
||||
end-placeholder="结束"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺">
|
||||
<el-select v-model="params.storeId" clearable filterable placeholder="全部店铺" style="width: 200px">
|
||||
<el-option v-for="item in shops" :key="item.id" :label="item.storeName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleExport">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="mt_10">
|
||||
<el-table v-loading="loading" border :data="data" style="width: 100%">
|
||||
<el-table-column label="序号" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
{{ (params.pageNumber - 1) * params.pageSize + $index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="storeName" label="店铺名称" min-width="140" />
|
||||
<el-table-column prop="payOrderCount" label="订单支付笔数" width="120" align="right" />
|
||||
<el-table-column label="支付金额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.payAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="营业额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.turnover) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠金额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.discountAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="折扣率" width="90" align="right">
|
||||
<template #default="{ row }">{{ formatPercent(row.discountRate) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="营业收入" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.operatingIncome) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="营业收入占比" width="120" align="right">
|
||||
<template #default="{ row }">{{ formatPercent(row.operatingIncomePercent) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="笔单价" width="100" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.avgOrderPrice) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="refundCount" label="退款笔数" width="100" align="right" />
|
||||
<el-table-column label="订单退款金额" width="120" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.refundAmount) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="orderConversionRate" label="下单转化率" width="110" align="right" />
|
||||
<el-table-column prop="payConversionRate" label="支付转化率" width="110" align="right" />
|
||||
<el-table-column label="环比差额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.momDiff) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="环比增长率" width="110" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :class="rateClass(row.momRate)">{{ row.momRate || "0%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="同比差额" width="110" align="right">
|
||||
<template #default="{ row }">{{ formatMoney(row.yoyDiff) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="同比增长率" width="110" align="right">
|
||||
<template #default="{ row }">
|
||||
<span :class="rateClass(row.yoyRate)">{{ row.yoyRate || "0%" }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
v-model:current-page="params.pageNumber"
|
||||
v-model:page-size="params.pageSize"
|
||||
class="mt_10"
|
||||
:total="total"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@current-change="loadData"
|
||||
@size-change="loadData"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_Statistics from "@/api/statistics";
|
||||
import { getShopListData } from "@/api/shops";
|
||||
import { downloadBlob } from "@/utils/downloadBlob";
|
||||
|
||||
export default {
|
||||
name: "store-performance-report",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dateRange: [],
|
||||
defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
|
||||
params: { pageNumber: 1, pageSize: 20, storeId: "" },
|
||||
data: [],
|
||||
total: 0,
|
||||
shops: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initDefaultRange();
|
||||
this.loadShops();
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
initDefaultRange() {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setDate(start.getDate() - 6);
|
||||
this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
|
||||
},
|
||||
formatDate(date, startOfDay) {
|
||||
const y = date.getFullYear();
|
||||
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const d = String(date.getDate()).padStart(2, "0");
|
||||
return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
|
||||
},
|
||||
loadShops() {
|
||||
getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
|
||||
if (res.success) this.shops = res.result.records || [];
|
||||
});
|
||||
},
|
||||
buildParams() {
|
||||
const p = { ...this.params };
|
||||
if (this.dateRange && this.dateRange.length === 2) {
|
||||
p.startTime = this.dateRange[0];
|
||||
p.endTime = this.dateRange[1];
|
||||
}
|
||||
return p;
|
||||
},
|
||||
handleSearch() {
|
||||
this.params.pageNumber = 1;
|
||||
this.loadData();
|
||||
},
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
API_Statistics.getStorePerformanceReport(this.buildParams()).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records || [];
|
||||
this.total = res.result.total || 0;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleExport() {
|
||||
API_Statistics.exportStorePerformanceReport(this.buildParams()).then((blob) => {
|
||||
downloadBlob(blob, "店铺业绩报表.xlsx");
|
||||
});
|
||||
},
|
||||
formatMoney(val) {
|
||||
return this.$filters.unitPrice(val, "￥");
|
||||
},
|
||||
formatPercent(val) {
|
||||
if (val == null || val === "") return "0%";
|
||||
return `${Number(val).toFixed(2)}%`;
|
||||
},
|
||||
rateClass(rate) {
|
||||
if (!rate) return "";
|
||||
if (rate.startsWith("+")) return "trend-up";
|
||||
if (rate.startsWith("-") && rate !== "0%") return "trend-down";
|
||||
return "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.trend-up {
|
||||
color: #f56c6c;
|
||||
}
|
||||
.trend-down {
|
||||
color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user