From 13cf1feefb8d46a3236bbccf1a99a2ac58bfcdfa Mon Sep 17 00:00:00 2001 From: dhb52 Date: Sat, 6 Apr 2024 15:38:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8try=20finally?= =?UTF-8?q?=E5=81=9C=E6=AD=A2loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CustomerConversionStat.vue | 25 ++++++--- .../customer/components/CustomerDealCycle.vue | 50 ++++++++++++++---- .../components/CustomerFollowUpSummary.vue | 51 +++++++++++++++---- .../components/CustomerFollowUpType.vue | 19 +++++-- .../customer/components/CustomerSummary.vue | 49 ++++++++++++++---- 5 files changed, 152 insertions(+), 42 deletions(-) diff --git a/src/views/crm/statistics/customer/components/CustomerConversionStat.vue b/src/views/crm/statistics/customer/components/CustomerConversionStat.vue index 17893cf9..7dd0d6bb 100644 --- a/src/views/crm/statistics/customer/components/CustomerConversionStat.vue +++ b/src/views/crm/statistics/customer/components/CustomerConversionStat.vue @@ -69,12 +69,12 @@ import { CrmStatisticsCustomerSummaryByDateRespVO } from '@/api/crm/statistics/customer' import { EChartsOption } from 'echarts' -import { round } from 'lodash-es' import { dateFormatter } from '@/utils/formatTime' import { erpPriceTableColumnFormatter } from '@/utils' import { DICT_TYPE } from '@/utils/dict' defineOptions({ name: 'CustomerConversionStat' }) + const props = defineProps<{ queryParams: any }>() // 搜索参数 const loading = ref(false) // 加载中 @@ -84,7 +84,7 @@ const list = ref([]) // 列表的数 const echartsOption = reactive({ grid: { left: 20, - right: 20, + right: 40, // 让X轴右侧显示完整 bottom: 20, containLabel: true }, @@ -124,11 +124,9 @@ const echartsOption = reactive({ } }) as EChartsOption -/** 获取统计数据 */ -const loadData = async () => { +/** 获取数据并填充图表 */ +const fetchAndFill = async () => { // 1. 加载统计数据 - loading.value = true - // TODO @ddhb52:这里调用 StatisticsCustomerApi.getCustomerSummaryByDate 好像不太对??? const customerCount = await StatisticsCustomerApi.getCustomerSummaryByDate(props.queryParams) const contractSummary = await StatisticsCustomerApi.getContractSummary(props.queryParams) // 2.1 更新 Echarts 数据 @@ -143,7 +141,7 @@ const loadData = async () => { return { name: item.time, value: item.customerCreateCount - ? round((item.customerDealCount / item.customerCreateCount) * 100, 2) + ? ((item.customerDealCount / item.customerCreateCount) * 100).toFixed(2) : 0 } } @@ -151,8 +149,19 @@ const loadData = async () => { } // 2.2 更新列表数据 list.value = contractSummary - loading.value = false } + +/** 获取统计数据 */ +const loadData = async () => { + loading.value = true + try { + fetchAndFill() + } + finally { + loading.value = false + } +} + defineExpose({ loadData }) /** 初始化 */ diff --git a/src/views/crm/statistics/customer/components/CustomerDealCycle.vue b/src/views/crm/statistics/customer/components/CustomerDealCycle.vue index 9243e6a3..a3ac2bfd 100644 --- a/src/views/crm/statistics/customer/components/CustomerDealCycle.vue +++ b/src/views/crm/statistics/customer/components/CustomerDealCycle.vue @@ -31,6 +31,7 @@ import { import { EChartsOption } from 'echarts' defineOptions({ name: 'CustomerDealCycle' }) + const props = defineProps<{ queryParams: any }>() // 搜索参数 const loading = ref(false) // 加载中 @@ -40,7 +41,7 @@ const list = ref([]) // 列表的 const echartsOption = reactive({ grid: { left: 20, - right: 20, + right: 40, // 让X轴右侧显示完整 bottom: 20, containLabel: true }, @@ -49,12 +50,14 @@ const echartsOption = reactive({ { name: '成交周期(天)', type: 'bar', - data: [] + data: [], + yAxisIndex: 0, }, { name: '成交客户数', type: 'bar', - data: [] + data: [], + yAxisIndex: 1, } ], toolbox: { @@ -74,10 +77,26 @@ const echartsOption = reactive({ type: 'shadow' } }, - yAxis: { - type: 'value', - name: '数量(个)' - }, + yAxis: [ + { + type: 'value', + name: '成交周期(天)', + min: 0, + minInterval: 1, // 显示整数刻度 + }, + { + type: 'value', + name: '成交客户数', + min: 0, + minInterval: 1, // 显示整数刻度 + splitLine: { + lineStyle: { + type: 'dotted', // 右侧网格线虚化, 减少混乱 + opacity: 0.7, + } + } + }, + ], xAxis: { type: 'category', name: '日期', @@ -85,10 +104,9 @@ const echartsOption = reactive({ } }) as EChartsOption -/** 获取统计数据 */ -const loadData = async () => { +/** 获取数据并填充图表 */ +const fetchAndFill = async () => { // 1. 加载统计数据 - loading.value = true const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate( props.queryParams ) @@ -116,7 +134,17 @@ const loadData = async () => { } // 2.2 更新列表数据 list.value = customerDealCycleByUser - loading.value = false +} + +/** 获取统计数据 */ +const loadData = async () => { + loading.value = true + try { + fetchAndFill() + } + finally { + loading.value = false + } } defineExpose({ loadData }) diff --git a/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue b/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue index 5dc6215a..204a821f 100644 --- a/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue +++ b/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue @@ -1,7 +1,7 @@