From 16c6f56f60a6cc7ae13b5e26e8001e9dfcc28500 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 15 十月 2026 13:07:26 +0800
Subject: [PATCH] fix(crm): 营销管理排行榜数据展示问题
---
src/views/crm/statistics/portrait/data.ts | 6 ++-
src/views/crm/statistics/portrait/index.vue | 26 +++++++++++--
src/views/crm/statistics/portrait/chartOptions.ts | 39 +++++++++++--------
src/views/crm/statistics/rank/data.ts | 6 ++-
src/views/crm/statistics/rank/index.vue | 15 +------
5 files changed, 56 insertions(+), 36 deletions(-)
diff --git a/src/views/crm/statistics/portrait/chartOptions.ts b/src/views/crm/statistics/portrait/chartOptions.ts
index 7088c22..3720ad9 100644
--- a/src/views/crm/statistics/portrait/chartOptions.ts
+++ b/src/views/crm/statistics/portrait/chartOptions.ts
@@ -78,6 +78,21 @@
series: [getPieSeries(seriesName, data)],
});
+/**
+ * 涓浗鍦板浘锛欵Charts 榛樿鍙妸鍦板浘鎾戝埌瀹瑰櫒楂樺害鐨� 80%锛屽鍣ㄥ姞瀹藉苟涓嶄細璁╁湴鍥惧彉澶с��
+ * 鐢� layoutCenter + layoutSize 鎶婂湴鍥鹃《鍒� 92%锛屽苟绋嶅井涓嬬Щ缁欐爣棰樼暀浣嶇疆銆�
+ */
+const getMapSeries = (name: string, data: any[]) => ({
+ name,
+ type: 'map' as const,
+ map: 'china',
+ roam: false,
+ selectedMode: false,
+ layoutCenter: ['50%', '52%'],
+ layoutSize: '92%',
+ data,
+});
+
export function getChartOptions(activeTabName: any, res: any): any {
switch (activeTabName) {
case 'area': {
@@ -120,19 +135,15 @@
max: leftMax,
},
series: [
- {
- name: '瀹㈡埛鍦板煙鍒嗗竷',
- type: 'map',
- map: 'china',
- roam: false,
- selectedMode: false,
- data: data.map((item: any) => {
+ getMapSeries(
+ '瀹㈡埛鍦板煙鍒嗗竷',
+ data.map((item: any) => {
return {
name: item.areaName,
value: item.customerCount || 0,
};
}),
- },
+ ),
],
},
right: {
@@ -157,19 +168,15 @@
max: rightMax,
},
series: [
- {
- name: '瀹㈡埛鍦板煙鍒嗗竷',
- type: 'map',
- map: 'china',
- roam: false,
- selectedMode: false,
- data: data.map((item: any) => {
+ getMapSeries(
+ '瀹㈡埛鍦板煙鍒嗗竷',
+ data.map((item: any) => {
return {
name: item.areaName,
value: item.dealCount || 0,
};
}),
- },
+ ),
],
},
};
diff --git a/src/views/crm/statistics/portrait/data.ts b/src/views/crm/statistics/portrait/data.ts
index b443f75..9070e72 100644
--- a/src/views/crm/statistics/portrait/data.ts
+++ b/src/views/crm/statistics/portrait/data.ts
@@ -5,6 +5,8 @@
import { useUserStore } from '@vben/stores';
import { beginOfDay, endOfDay, formatDateTime, handleTree } from '@vben/utils';
+import dayjs from 'dayjs';
+
import { getSimpleDeptList } from '#/api/system/dept';
import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
@@ -42,8 +44,8 @@
format: 'YYYY-MM-DD',
},
defaultValue: [
- formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
- formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
+ formatDateTime(beginOfDay(dayjs().subtract(2, 'month').toDate())),
+ formatDateTime(endOfDay(new Date())),
],
},
{
diff --git a/src/views/crm/statistics/portrait/index.vue b/src/views/crm/statistics/portrait/index.vue
index b75518b..3a73d4c 100644
--- a/src/views/crm/statistics/portrait/index.vue
+++ b/src/views/crm/statistics/portrait/index.vue
@@ -4,7 +4,7 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
import { ContentWrap, Page } from '@vben/common-ui';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
@@ -24,6 +24,14 @@
const rightChartRef = ref<EchartsUIType>();
const { renderEcharts: renderLeftEcharts } = useEcharts(leftChartRef);
const { renderEcharts: renderRightEcharts } = useEcharts(rightChartRef);
+
+/**
+ * 鍩庡競鍒嗗竷鍒嗘瀽锛氫袱寮犲湴鍥惧悇鍗犱竴鏁磋銆�
+ * 鍦板浘鍥惧舰鐨勫ぇ灏忕敱瀹瑰櫒楂樺害鍐冲畾锛圗Charts 鎸夌煭杈硅嚜閫傚簲锛屽姞瀹藉彧澶氱暀鐧斤級锛�
+ * 鎵�浠ヨ繖閲屾妸楂樺害缁欒冻锛岄厤鍚� chartOptions 閲岀殑 layoutSize 鎾戞弧銆�
+ */
+const isAreaTab = computed(() => activeTabName.value === 'area');
+const chartHeight = computed(() => (isAreaTab.value ? '700px' : '300px'));
const [QueryForm, formApi] = useVbenForm({
commonConfig: {
@@ -93,9 +101,19 @@
:force-render="true"
/>
</Tabs>
- <div class="mt-5 flex">
- <EchartsUI class="m-4 w-1/2" ref="leftChartRef" />
- <EchartsUI class="m-4 w-1/2" ref="rightChartRef" />
+ <div class="mt-5 flex" :class="{ 'flex-col': isAreaTab }">
+ <EchartsUI
+ class="m-4"
+ :class="isAreaTab ? 'w-full' : 'w-1/2'"
+ :height="chartHeight"
+ ref="leftChartRef"
+ />
+ <EchartsUI
+ class="m-4"
+ :class="isAreaTab ? 'w-full' : 'w-1/2'"
+ :height="chartHeight"
+ ref="rightChartRef"
+ />
</div>
<Grid v-show="activeTabName !== 'area'" />
</ContentWrap>
diff --git a/src/views/crm/statistics/rank/data.ts b/src/views/crm/statistics/rank/data.ts
index ebbf6f8..f1b11a0 100644
--- a/src/views/crm/statistics/rank/data.ts
+++ b/src/views/crm/statistics/rank/data.ts
@@ -4,6 +4,8 @@
import { useUserStore } from '@vben/stores';
import { beginOfDay, endOfDay, formatDateTime, handleTree } from '@vben/utils';
+import dayjs from 'dayjs';
+
import { getSimpleDeptList } from '#/api/system/dept';
import { getRangePickerDefaultProps } from '#/utils';
@@ -56,8 +58,8 @@
format: 'YYYY-MM-DD',
},
defaultValue: [
- formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
- formatDateTime(endOfDay(new Date(Date.now() - 3600 * 1000 * 24))),
+ formatDateTime(beginOfDay(dayjs().subtract(2, 'month').toDate())),
+ formatDateTime(endOfDay(new Date())),
],
},
{
diff --git a/src/views/crm/statistics/rank/index.vue b/src/views/crm/statistics/rank/index.vue
index 9c4bec2..f4e7b6b 100644
--- a/src/views/crm/statistics/rank/index.vue
+++ b/src/views/crm/statistics/rank/index.vue
@@ -2,7 +2,7 @@
import type { EchartsUIType } from '@vben/plugins/echarts';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { CrmStatisticsCustomerApi } from '#/api/crm/statistics/customer';
+import type { CrmStatisticsRankApi } from '#/api/crm/statistics/rank';
import { onMounted, ref } from 'vue';
@@ -13,7 +13,7 @@
import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getDatas } from '#/api/crm/statistics/customer';
+import { getDatas } from '#/api/crm/statistics/rank';
import { $t } from '#/locales';
import { getChartOptions } from './chartOptions';
@@ -48,15 +48,6 @@
pagerConfig: {
enabled: false,
},
- proxyConfig: {
- ajax: {
- query: async (_, formValues) => {
- const res = await getDatas(activeTabName.value, formValues);
- await renderEcharts(getChartOptions(activeTabName.value, res));
- return res;
- },
- },
- },
rowConfig: {
keyField: 'id',
isHover: true,
@@ -64,7 +55,7 @@
toolbarConfig: {
enabled: false,
},
- } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUserRespVO>,
+ } as VxeTableGridOptions<CrmStatisticsRankApi.RankRespVO>,
});
/** tab 鍒囨崲 */
--
Gitblit v1.9.3