|
|
@@ -47,7 +47,7 @@
|
|
|
|
|
|
</section>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<!-- 图表区域 -->
|
|
|
|
|
|
@@ -57,23 +57,23 @@
|
|
|
|
|
|
<div class="chart-wrapper funnel-chart-wrapper">
|
|
|
|
|
|
- <FunnelChart :date-range="currentDateRange" />
|
|
|
+ <FunnelChart :date-range="currentDateRange" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<!-- 明星商品价值环图 (Top 5) -->
|
|
|
|
|
|
<div class="chart-wrapper">
|
|
|
|
|
|
- <Top5PieChart :date-range="currentDateRange" />
|
|
|
+ <Top5PieChart :date-range="currentDateRange" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<!-- 订单价值漏损分析 (退款) - 铺满整排 -->
|
|
|
|
|
|
@@ -94,16 +94,18 @@
|
|
|
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
-import axios from 'axios';
|
|
|
-
|
|
|
import KpiCard from './KpiCard/index.vue';
|
|
|
-
|
|
|
import FunnelChart from './FunnelChart/index.vue';
|
|
|
-
|
|
|
import Top5PieChart from './Top5PieChart/index.vue';
|
|
|
-
|
|
|
import LeakageCard from './LeakageCard/index.vue';
|
|
|
+import {
|
|
|
+ getOrderAveragePaymentTime,
|
|
|
+ getOrderGmv,
|
|
|
+ getOrderMaxDate,
|
|
|
+ getOrderRBig,
|
|
|
+ getOrderTop5Percentage,
|
|
|
+ uploadOrderValueFiles
|
|
|
+} from '@/api/order';
|
|
|
|
|
|
|
|
|
|
|
|
@@ -247,11 +249,7 @@ export default {
|
|
|
|
|
|
files.forEach(file => formData.append('files', file));
|
|
|
|
|
|
- const { data } = await axios.post('/prod-api/api/import/import-data/upload', formData, {
|
|
|
-
|
|
|
- headers: { 'Content-Type': 'multipart/form-data' }
|
|
|
-
|
|
|
- });
|
|
|
+ const data = await uploadOrderValueFiles(formData);
|
|
|
|
|
|
if (data && data.success) {
|
|
|
|
|
|
@@ -369,37 +367,37 @@ export default {
|
|
|
|
|
|
const [gmvRes, p80Res, top5Res, avgTimeRes] = await Promise.all([
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/gmv?startDate=${startDate}&endDate=${endDate}`),
|
|
|
+ getOrderGmv({ startDate, endDate }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/r-big?startDate=${startDate}&endDate=${endDate}`),
|
|
|
+ getOrderRBig({ startDate, endDate }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/top5-percentage?startDate=${startDate}&endDate=${endDate}`),
|
|
|
+ getOrderTop5Percentage({ startDate, endDate }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/average-payment-time?startDate=${startDate}&endDate=${endDate}`)
|
|
|
+ getOrderAveragePaymentTime({ startDate, endDate })
|
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
- const gmvValue = gmvRes.data || 0;
|
|
|
+ const gmvValue = gmvRes || 0;
|
|
|
|
|
|
this.kpiData.gmv = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(gmvValue);
|
|
|
|
|
|
|
|
|
|
|
|
- const p80Value = p80Res.data?.rBigRatio || 0;
|
|
|
+ const p80Value = p80Res?.rBigRatio || 0;
|
|
|
|
|
|
this.kpiData.p80Contribution = `${Math.round(p80Value)}%`;
|
|
|
|
|
|
|
|
|
|
|
|
- const top5Value = top5Res.data?.data?.top5Percentage || 0;
|
|
|
+ const top5Value = top5Res?.data?.top5Percentage || 0;
|
|
|
|
|
|
this.kpiData.top5Contribution = `${Math.round(top5Value)}%`;
|
|
|
|
|
|
|
|
|
|
|
|
- const avgSeconds = avgTimeRes.data?.averagePaymentSeconds || 0;
|
|
|
+ const avgSeconds = avgTimeRes?.averagePaymentSeconds || 0;
|
|
|
|
|
|
const minutes = Math.floor(avgSeconds / 60);
|
|
|
|
|
|
@@ -487,13 +485,13 @@ export default {
|
|
|
|
|
|
const [gmvRes, p80Res, top5Res, avgTimeRes] = await Promise.all([
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/gmv?startDate=${previousMonthStart}&endDate=${previousMonthEnd}`),
|
|
|
+ getOrderGmv({ startDate: previousMonthStart, endDate: previousMonthEnd }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/r-big?startDate=${previousMonthStart}&endDate=${previousMonthEnd}`),
|
|
|
+ getOrderRBig({ startDate: previousMonthStart, endDate: previousMonthEnd }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/top5-percentage?startDate=${previousMonthStart}&endDate=${previousMonthEnd}`),
|
|
|
+ getOrderTop5Percentage({ startDate: previousMonthStart, endDate: previousMonthEnd }),
|
|
|
|
|
|
- axios.get(`/prod-api/api/analysis/average-payment-time?startDate=${previousMonthStart}&endDate=${previousMonthEnd}`)
|
|
|
+ getOrderAveragePaymentTime({ startDate: previousMonthStart, endDate: previousMonthEnd })
|
|
|
|
|
|
]);
|
|
|
|
|
|
@@ -501,13 +499,13 @@ export default {
|
|
|
|
|
|
return {
|
|
|
|
|
|
- gmv: gmvRes.data || 0,
|
|
|
+ gmv: gmvRes || 0,
|
|
|
|
|
|
- p80: p80Res.data?.rBigRatio || 0,
|
|
|
+ p80: p80Res?.rBigRatio || 0,
|
|
|
|
|
|
- top5: top5Res.data?.data?.top5Percentage || 0,
|
|
|
+ top5: top5Res?.data?.top5Percentage || 0,
|
|
|
|
|
|
- avgTime: avgTimeRes.data?.averagePaymentSeconds || 0
|
|
|
+ avgTime: avgTimeRes?.averagePaymentSeconds || 0
|
|
|
|
|
|
};
|
|
|
|
|
|
@@ -525,17 +523,17 @@ export default {
|
|
|
|
|
|
try {
|
|
|
|
|
|
- const res = await axios.get('/prod-api/api/analysis/max-date');
|
|
|
+ const res = await getOrderMaxDate();
|
|
|
|
|
|
- this.maxDate = res.data;
|
|
|
+ this.maxDate = res;
|
|
|
|
|
|
- this.selectedDate = res.data;
|
|
|
+ this.selectedDate = res;
|
|
|
|
|
|
|
|
|
|
|
|
- const startDate = this.formatYmd(this.addDays(res.data, -6));
|
|
|
+ const startDate = this.formatYmd(this.addDays(res, -6));
|
|
|
|
|
|
- this.currentDateRange = { start: startDate, end: res.data };
|
|
|
+ this.currentDateRange = { start: startDate, end: res };
|
|
|
|
|
|
await this.fetchAllApiData();
|
|
|
|
|
|
@@ -663,31 +661,31 @@ export default {
|
|
|
|
|
|
const [gmvRes, p80Res, top5Res, avgTimeRes] = await Promise.all([
|
|
|
|
|
|
- axios.get('/prod-api/api/analysis/gmv'),
|
|
|
+ getOrderGmv(),
|
|
|
|
|
|
- axios.get('/prod-api/api/analysis/r-big'),
|
|
|
+ getOrderRBig(),
|
|
|
|
|
|
- axios.get('/prod-api/api/analysis/top5-percentage'),
|
|
|
+ getOrderTop5Percentage(),
|
|
|
|
|
|
- axios.get('/prod-api/api/analysis/average-payment-time')
|
|
|
+ getOrderAveragePaymentTime()
|
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
- const gmvValue = gmvRes.data || 0;
|
|
|
+ const gmvValue = gmvRes || 0;
|
|
|
|
|
|
this.kpiData.gmv = new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(gmvValue);
|
|
|
|
|
|
- const p80Value = p80Res.data?.rBigRatio || 0;
|
|
|
+ const p80Value = p80Res?.rBigRatio || 0;
|
|
|
|
|
|
this.kpiData.p80Contribution = `${Math.round(p80Value)}%`;
|
|
|
|
|
|
- const top5Value = top5Res.data?.data?.top5Percentage || 0;
|
|
|
+ const top5Value = top5Res?.data?.top5Percentage || 0;
|
|
|
|
|
|
this.kpiData.top5Contribution = `${Math.round(top5Value)}%`;
|
|
|
|
|
|
- const avgSeconds = avgTimeRes.data?.averagePaymentSeconds || 0;
|
|
|
+ const avgSeconds = avgTimeRes?.averagePaymentSeconds || 0;
|
|
|
|
|
|
const minutes = Math.floor(avgSeconds / 60);
|
|
|
|