From 6c0dcb777cb0afaa23c49985018afb85353aeb00 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 31 三月 2026 17:17:26 +0800
Subject: [PATCH] 销售统计看板接口对接
---
src/views/reportAnalysis/salesStatistics/index.vue | 202 +++++++++++++++++++++++++++++++++++---------------
1 files changed, 140 insertions(+), 62 deletions(-)
diff --git a/src/views/reportAnalysis/salesStatistics/index.vue b/src/views/reportAnalysis/salesStatistics/index.vue
index c1dc7e0..63b1ac4 100644
--- a/src/views/reportAnalysis/salesStatistics/index.vue
+++ b/src/views/reportAnalysis/salesStatistics/index.vue
@@ -191,11 +191,11 @@
title="鏂板瀹㈡埛瓒嬪娍鍒嗘瀽" />
<div class="panel-tabs">
<span class="tab-item"
- :class="{ active: customerTimeDimension === 'year' }"
- @click="handleCustomerTimeDimensionChange('year')">骞�</span>
+ :class="{ active: customerTimeDimension === '骞�' }"
+ @click="handleCustomerTimeDimensionChange('骞�')">骞�</span>
<span class="tab-item"
- :class="{ active: customerTimeDimension === 'month' }"
- @click="handleCustomerTimeDimensionChange('month')">鏈�</span>
+ :class="{ active: customerTimeDimension === '鏈�' }"
+ @click="handleCustomerTimeDimensionChange('鏈�')">鏈�</span>
</div>
<div class="bi-panel-body">
<div class="chart-unit-row chart-unit-single">
@@ -280,7 +280,10 @@
import * as echarts from "echarts";
import dayjs from "dayjs";
import PanelHeader from "@/views/reportAnalysis/PSIDataAnalysis/components/PanelHeader.vue";
- import { findAllQualifiedStockOutRecordTypeOptions } from "../../../api/basicData/enum";
+ import {
+ getDashboardStatistics,
+ getCustomerTrends,
+ } from "@/api/reportAnalysis/salesStatistics";
const router = useRouter();
const screenRoot = ref(null);
@@ -346,7 +349,7 @@
const boardTimeDimension = ref("year");
const boardSelectedArea = ref("鍏ㄩ儴");
const boardProductType = ref("鏉挎潗");
- const customerTimeDimension = ref("year");
+ const customerTimeDimension = ref("骞�");
const salesAreas = [
"鍏ㄩ儴",
@@ -650,6 +653,9 @@
});
const totalSalesAmount = ref(1299);
+ const centerNewCustomerCount = ref(112);
+ const completedOrders = ref(1829);
+ const totalSalesAreaCount = ref(12);
const newCustomerCount = computed(() => {
return filteredData.value.reduce((sum, item) => sum + item.newCustomers, 0);
@@ -667,17 +673,49 @@
return Object.values(customerMap).reduce((sum, count) => sum + count, 0);
});
- // 涓棿涓績鐜寚鏍囷紙鐢ㄤ簬澶у睆灞曠ず锛屼娇鐢ㄧ幇鏈夌粺璁℃暟鎹仛鏄犲皠锛�
- const centerNewCustomerCount = computed(() => 112);
- const completedOrders = computed(() => 1829);
- const salesOrderCount = computed(() => 34);
- const totalSalesAreaCount = computed(() => 12);
+ // 瀹㈡埛瓒嬪娍鏁版嵁
+ const customerTrendsData = ref([]);
// 鍙樺寲鐜囪绠楋紙妯℃嫙锛�
const salesVolumeChange = ref("+5.2");
const salesAmountChange = ref("+7.8");
const customerCountChange = ref("+3.5");
const totalCustomerChange = ref("+2.1");
+
+ // 鑾峰彇涓績鐪嬫澘鏁版嵁
+ const fetchDashboardData = async () => {
+ try {
+ const response = await getDashboardStatistics();
+ if (response && response.data) {
+ totalSalesAmount.value = response.data.price || 0;
+ completedOrders.value = response.data.delivery || 0;
+ centerNewCustomerCount.value = response.data.customer || 0;
+ totalSalesAreaCount.value = response.data.totalSalesAreaCount || 0;
+ }
+ } catch (error) {
+ console.error("鑾峰彇涓績鐪嬫澘鏁版嵁澶辫触:", error);
+ }
+ };
+
+ // 鑾峰彇瀹㈡埛瓒嬪娍鏁版嵁
+ const fetchCustomerTrendsData = async () => {
+ try {
+ const response = await getCustomerTrends({
+ days: customerTimeDimension.value,
+ });
+ if (response && response.data) {
+ // API杩斿洖鐨勬暟鎹粨鏋勫涓嬶細
+ // {
+ // "dates": ["2026-01-01", "2025-01-01", ...],
+ // "customerTrends": [{"ALLIN": 4, "閾跺窛": 3, ...}, ...]
+ // }
+ customerTrendsData.value = response.data;
+ updateCharts();
+ }
+ } catch (error) {
+ console.error("鑾峰彇瀹㈡埛瓒嬪娍鏁版嵁澶辫触:", error);
+ }
+ };
// 琛ㄦ牸鏁版嵁
const tableData = computed(() => {
@@ -785,7 +823,7 @@
right: "1%",
textStyle: {
color: "#B8C8E0",
- fontSize: getResponsiveValue(9),
+ fontSize: getResponsiveValue(10),
},
itemWidth: getResponsiveValue(10),
itemHeight: getResponsiveValue(10),
@@ -912,7 +950,7 @@
right: "1%",
textStyle: {
color: "#B8C8E0",
- fontSize: getResponsiveValue(9),
+ fontSize: getResponsiveValue(10),
},
itemWidth: getResponsiveValue(10),
itemHeight: getResponsiveValue(10),
@@ -1092,15 +1130,6 @@
// 鏂板瀹㈡埛瓒嬪娍鍥捐〃閰嶇疆锛堟寜閿�鍞尯鍜屽勾鏈堢淮搴︼級
const productTypeTrendChartOption = computed(() => {
- // 涓烘瘡涓攢鍞尯鐢熸垚鏁版嵁
- const salesAreas = [
- "鍏ㄩ儴",
- "A閿�鍞尯",
- "B閿�鍞尯",
- "C閿�鍞尯",
- "D閿�鍞尯",
- "E閿�鍞尯",
- ];
const colors = [
"#00A4ED",
"#34D8F7",
@@ -1108,46 +1137,91 @@
"#8A6BFF",
"#C8C447",
"#FF6B6B",
+ "#FF8B6B",
+ "#FFCB6B",
+ "#8BC34A",
+ "#4CAF50",
];
- const year = 2024;
const periodType = customerTimeDimension.value;
// 鐢熸垚鏃堕棿娈�
let periods = [];
- if (periodType === "year") {
- // 骞村害鏁版嵁锛�12涓湀
- for (let month = 1; month <= 12; month++) {
- periods.push(`${year}-${month.toString().padStart(2, "0")}`);
- }
- } else {
- // 鏈堝害鏁版嵁锛�30澶�
- const month = 1;
- for (let day = 1; day <= 30; day++) {
- periods.push(
- `${year}-${month.toString().padStart(2, "0")}-${day
- .toString()
- .padStart(2, "0")}`
- );
- }
- }
+ let salesAreas = [];
+ let series = [];
- // 涓烘瘡涓攢鍞尯鐢熸垚鏁版嵁
- const series = salesAreas.map((area, index) => {
- const data = periods.map(() => {
- return periodType === "year"
- ? Math.floor(Math.random() * 10) + 2
- : Math.floor(Math.random() * 3) + 1;
+ if (
+ customerTrendsData.value &&
+ customerTrendsData.value.dates &&
+ customerTrendsData.value.customerTrends
+ ) {
+ // 浣跨敤API杩斿洖鐨勬暟鎹�
+ periods = customerTrendsData.value.dates;
+
+ // 鎻愬彇鎵�鏈夐攢鍞尯鍩�
+ const areaSet = new Set();
+ customerTrendsData.value.customerTrends.forEach(item => {
+ Object.keys(item).forEach(key => {
+ areaSet.add(key);
+ });
});
+ salesAreas = Array.from(areaSet);
- return {
- name: area,
- data: data,
- type: "line",
- smooth: false,
- lineStyle: { width: getResponsiveValue(1), color: colors[index] },
- itemStyle: { color: colors[index] },
- };
- });
+ // 涓烘瘡涓攢鍞尯鍩熺敓鎴愭暟鎹�
+ series = salesAreas.map((area, index) => {
+ const data = customerTrendsData.value.customerTrends.map((item, i) => {
+ return item[area] || 0;
+ });
+
+ return {
+ name: area,
+ data: data,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ width: getResponsiveValue(1),
+ color: colors[index % colors.length],
+ },
+ itemStyle: { color: colors[index % colors.length] },
+ };
+ });
+ } else {
+ // 妯℃嫙鏁版嵁
+ const year = 2024;
+ if (periodType === "year") {
+ // 骞村害鏁版嵁锛�12涓湀
+ for (let month = 1; month <= 12; month++) {
+ periods.push(`${year}-${month.toString().padStart(2, "0")}`);
+ }
+ } else {
+ // 鏈堝害鏁版嵁锛�30澶�
+ const month = 1;
+ for (let day = 1; day <= 30; day++) {
+ periods.push(
+ `${year}-${month.toString().padStart(2, "0")}-${day
+ .toString()
+ .padStart(2, "0")}`
+ );
+ }
+ }
+
+ salesAreas = [];
+ series = salesAreas.map((area, index) => {
+ const data = periods.map(() => {
+ return periodType === "year"
+ ? Math.floor(Math.random() * 10) + 2
+ : Math.floor(Math.random() * 3) + 1;
+ });
+
+ return {
+ name: area,
+ data: data,
+ type: "line",
+ smooth: false,
+ lineStyle: { width: getResponsiveValue(1), color: colors[index] },
+ itemStyle: { color: colors[index] },
+ };
+ });
+ }
return {
backgroundColor: "transparent",
@@ -1171,7 +1245,7 @@
right: "1%",
textStyle: {
color: "#B8C8E0",
- fontSize: getResponsiveValue(9),
+ fontSize: getResponsiveValue(10),
},
itemWidth: getResponsiveValue(10),
itemHeight: getResponsiveValue(10),
@@ -1414,7 +1488,7 @@
// 澶勭悊鏂板瀹㈡埛瓒嬪娍鏃堕棿缁村害鍒囨崲
const handleCustomerTimeDimensionChange = dimension => {
customerTimeDimension.value = dimension;
- updateCharts();
+ fetchCustomerTrendsData();
};
// 鐢熸垚鐮屽潡閿�鍞暟鎹�
@@ -1525,7 +1599,7 @@
};
// 鐢熷懡鍛ㄦ湡
- onMounted(() => {
+ onMounted(async () => {
// 鍚姩椤堕儴鏍忔椂闂村埛鏂�
if (!timeTicker) {
timeTicker = setInterval(() => {
@@ -1544,6 +1618,10 @@
// 鐢熸垚鍒濆鏁版嵁
generateBlockSalesData();
generateBoardSalesData();
+
+ // 鑾峰彇鏁版嵁
+ await fetchDashboardData();
+ await fetchCustomerTrendsData();
// 绛夊緟DOM鏇存柊鍚庡垵濮嬪寲鍥捐〃
nextTick(() => {
@@ -1880,12 +1958,12 @@
}
/* .scroll-table tbody tr:nth-child(odd) {
- background-color: rgba(64, 158, 255, 0.05);
- }
+ background-color: rgba(64, 158, 255, 0.05);
+ }
- .scroll-table tbody tr:nth-child(even) {
- background-color: rgba(64, 158, 255, 0.1);
- } */
+ .scroll-table tbody tr:nth-child(even) {
+ background-color: rgba(64, 158, 255, 0.1);
+ } */
.oddTableTr {
background-color: rgba(64, 158, 255, 0.05);
}
--
Gitblit v1.9.3