crm:code review 公海客户分析

This commit is contained in:
YunaiV 2024-04-07 21:27:29 +08:00
parent 091ce90359
commit e8a3745b5e
7 changed files with 52 additions and 51 deletions

View File

@ -84,7 +84,7 @@ const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数
const echartsOption = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
grid: { grid: {
left: 20, left: 20,
right: 40, // X right: 40, // X
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -155,9 +155,8 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} } finally {
finally {
loading.value = false loading.value = false
} }
} }

View File

@ -26,7 +26,7 @@
import { import {
StatisticsCustomerApi, StatisticsCustomerApi,
CrmStatisticsCustomerDealCycleByDateRespVO, CrmStatisticsCustomerDealCycleByDateRespVO,
CrmStatisticsCustomerSummaryByDateRespVO, CrmStatisticsCustomerSummaryByDateRespVO
} from '@/api/crm/statistics/customer' } from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
@ -41,7 +41,7 @@ const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的
const echartsOption = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
grid: { grid: {
left: 20, left: 20,
right: 40, // X right: 40, // X
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -51,13 +51,13 @@ const echartsOption = reactive<EChartsOption>({
name: '成交周期(天)', name: '成交周期(天)',
type: 'bar', type: 'bar',
data: [], data: [],
yAxisIndex: 0, yAxisIndex: 0
}, },
{ {
name: '成交客户数', name: '成交客户数',
type: 'bar', type: 'bar',
data: [], data: [],
yAxisIndex: 1, yAxisIndex: 1
} }
], ],
toolbox: { toolbox: {
@ -82,7 +82,7 @@ const echartsOption = reactive<EChartsOption>({
type: 'value', type: 'value',
name: '成交周期(天)', name: '成交周期(天)',
min: 0, min: 0,
minInterval: 1, // minInterval: 1 //
}, },
{ {
type: 'value', type: 'value',
@ -92,10 +92,10 @@ const echartsOption = reactive<EChartsOption>({
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', // 线, type: 'dotted', // 线,
opacity: 0.7, opacity: 0.7
} }
} }
}, }
], ],
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -110,7 +110,7 @@ const fetchAndFill = async () => {
const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate( const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
props.queryParams props.queryParams
) )
const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate( const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
props.queryParams props.queryParams
) )
const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser( const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
@ -140,9 +140,8 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} } finally {
finally {
loading.value = false loading.value = false
} }
} }

View File

@ -1,7 +1,7 @@
<!-- 客户跟进次数分析 --> <!-- 客户跟进次数分析 -->
<template> <template>
<!-- Echarts图 --> <!-- Echarts图 -->
<el-card shadow="never" > <el-card shadow="never">
<el-skeleton :loading="loading" animated> <el-skeleton :loading="loading" animated>
<Echart :height="500" :options="echartsOption" /> <Echart :height="500" :options="echartsOption" />
</el-skeleton> </el-skeleton>
@ -28,7 +28,7 @@ import {
CrmStatisticsFollowUpSummaryByDateRespVO, CrmStatisticsFollowUpSummaryByDateRespVO,
CrmStatisticsFollowUpSummaryByUserRespVO CrmStatisticsFollowUpSummaryByUserRespVO
} from '@/api/crm/statistics/customer' } from '@/api/crm/statistics/customer'
import Echart from '@/components/Echart/src/Echart.vue'; import Echart from '@/components/Echart/src/Echart.vue'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
defineOptions({ name: 'CustomerFollowupSummary' }) defineOptions({ name: 'CustomerFollowupSummary' })
@ -42,7 +42,7 @@ const list = ref<CrmStatisticsFollowUpSummaryByUserRespVO[]>([]) // 列表的数
const echartsOption = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
grid: { grid: {
left: 20, left: 20,
right: 30, // X right: 30, // X
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -83,7 +83,7 @@ const echartsOption = reactive<EChartsOption>({
type: 'value', type: 'value',
name: '跟进客户数', name: '跟进客户数',
min: 0, min: 0,
minInterval: 1, // minInterval: 1 //
}, },
{ {
type: 'value', type: 'value',
@ -93,7 +93,7 @@ const echartsOption = reactive<EChartsOption>({
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', // 线, type: 'dotted', // 线,
opacity: 0.7, opacity: 0.7
} }
} }
} }
@ -142,9 +142,8 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} } finally {
finally {
loading.value = false loading.value = false
} }
} }

View File

@ -105,9 +105,8 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} } finally {
finally {
loading.value = false loading.value = false
} }
} }

View File

@ -12,8 +12,18 @@
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column label="序号" align="center" type="index" width="80" fixed="left" /> <el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
<el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" /> <el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" />
<el-table-column label="进入公海客户数" align="right" prop="customerPutCount" min-width="200" /> <el-table-column
<el-table-column label="公海领取客户数" align="right" prop="customerTakeCount" min-width="200" /> label="进入公海客户数"
align="right"
prop="customerPutCount"
min-width="200"
/>
<el-table-column
label="公海领取客户数"
align="right"
prop="customerTakeCount"
min-width="200"
/>
</el-table> </el-table>
</el-card> </el-card>
</template> </template>
@ -25,7 +35,7 @@ import {
} from '@/api/crm/statistics/customer' } from '@/api/crm/statistics/customer'
import { EChartsOption } from 'echarts' import { EChartsOption } from 'echarts'
defineOptions({ name: 'CustomerSummary' }) defineOptions({ name: 'CustomerPoolSummary' })
const props = defineProps<{ queryParams: any }>() // const props = defineProps<{ queryParams: any }>() //
@ -36,7 +46,7 @@ const list = ref<CrmStatisticsPoolSummaryByUserRespVO[]>([]) // 列表的数据
const echartsOption = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
grid: { grid: {
left: 20, left: 20,
right: 40, // X right: 40, // X
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -77,7 +87,7 @@ const echartsOption = reactive<EChartsOption>({
type: 'value', type: 'value',
name: '进入公海客户数', name: '进入公海客户数',
min: 0, min: 0,
minInterval: 1, // minInterval: 1 //
}, },
{ {
type: 'value', type: 'value',
@ -87,7 +97,7 @@ const echartsOption = reactive<EChartsOption>({
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', // 线, type: 'dotted', // 线,
opacity: 0.7, opacity: 0.7
} }
} }
} }
@ -95,19 +105,15 @@ const echartsOption = reactive<EChartsOption>({
xAxis: { xAxis: {
type: 'category', type: 'category',
name: '日期', name: '日期',
data: [], data: []
} }
}) as EChartsOption }) as EChartsOption
/** 获取数据并填充图表 */ /** 获取数据并填充图表 */
const fetchAndFill = async () => { const fetchAndFill = async () => {
// 1. // 1.
const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate( const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(props.queryParams)
props.queryParams const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(props.queryParams)
)
const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(
props.queryParams
)
// 2.1 Echarts // 2.1 Echarts
if (echartsOption.xAxis && echartsOption.xAxis['data']) { if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = poolSummaryByDate.map( echartsOption.xAxis['data'] = poolSummaryByDate.map(
@ -133,7 +139,7 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} finally { } finally {
loading.value = false loading.value = false
} }

View File

@ -71,7 +71,7 @@ const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数
const echartsOption = reactive<EChartsOption>({ const echartsOption = reactive<EChartsOption>({
grid: { grid: {
left: 20, left: 20,
right: 30, // X right: 30, // X
bottom: 20, bottom: 20,
containLabel: true containLabel: true
}, },
@ -112,7 +112,7 @@ const echartsOption = reactive<EChartsOption>({
type: 'value', type: 'value',
name: '新增客户数', name: '新增客户数',
min: 0, min: 0,
minInterval: 1, // minInterval: 1 //
}, },
{ {
type: 'value', type: 'value',
@ -122,7 +122,7 @@ const echartsOption = reactive<EChartsOption>({
splitLine: { splitLine: {
lineStyle: { lineStyle: {
type: 'dotted', // 线, type: 'dotted', // 线,
opacity: 0.7, opacity: 0.7
} }
} }
} }
@ -130,7 +130,7 @@ const echartsOption = reactive<EChartsOption>({
xAxis: { xAxis: {
type: 'category', type: 'category',
name: '日期', name: '日期',
data: [], data: []
} }
}) as EChartsOption }) as EChartsOption
@ -168,7 +168,7 @@ const fetchAndFill = async () => {
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
try { try {
fetchAndFill() await fetchAndFill()
} finally { } finally {
loading.value = false loading.value = false
} }

View File

@ -46,8 +46,7 @@
class="!w-240px" class="!w-240px"
node-key="id" node-key="id"
placeholder="请选择归属部门" placeholder="请选择归属部门"
@change="queryParams.userId = undefined;handleQuery() @change="(queryParams.userId = undefined), handleQuery()"
"
/> />
</el-form-item> </el-form-item>
<el-form-item label="员工" prop="userId"> <el-form-item label="员工" prop="userId">
@ -100,7 +99,7 @@
</el-tab-pane> </el-tab-pane>
<!-- 公海客户分析 --> <!-- 公海客户分析 -->
<el-tab-pane label="公海客户分析" lazy name="poolSummary"> <el-tab-pane label="公海客户分析" lazy name="poolSummary">
<PoolSummary ref="poolSummaryRef" :query-params="queryParams" /> <CustomerPoolSummary ref="customerPoolSummaryRef" :query-params="queryParams" />
</el-tab-pane> </el-tab-pane>
<!-- 成交周期分析 --> <!-- 成交周期分析 -->
<el-tab-pane label="成交周期分析" lazy name="dealCycle"> <el-tab-pane label="成交周期分析" lazy name="dealCycle">
@ -122,7 +121,7 @@ import CustomerDealCycle from './components/CustomerDealCycle.vue'
import CustomerFollowUpSummary from './components/CustomerFollowUpSummary.vue' import CustomerFollowUpSummary from './components/CustomerFollowUpSummary.vue'
import CustomerFollowUpType from './components/CustomerFollowUpType.vue' import CustomerFollowUpType from './components/CustomerFollowUpType.vue'
import CustomerSummary from './components/CustomerSummary.vue' import CustomerSummary from './components/CustomerSummary.vue'
import PoolSummary from './components/PoolSummary.vue' import CustomerPoolSummary from './components/CustomerPoolSummary.vue'
defineOptions({ name: 'CrmStatisticsCustomer' }) defineOptions({ name: 'CrmStatisticsCustomer' })
@ -153,7 +152,7 @@ const customerSummaryRef = ref() // 1. 客户总量分析
const followUpSummaryRef = ref() // 2. const followUpSummaryRef = ref() // 2.
const followUpTypeRef = ref() // 3. const followUpTypeRef = ref() // 3.
const conversionStatRef = ref() // 4. const conversionStatRef = ref() // 4.
const poolSummaryRef = ref() // 5. const customerPoolSummaryRef = ref() // 5.
const dealCycleRef = ref() // 6. const dealCycleRef = ref() // 6.
/** 搜索按钮操作 */ /** 搜索按钮操作 */
@ -172,7 +171,7 @@ const handleQuery = () => {
conversionStatRef.value?.loadData?.() conversionStatRef.value?.loadData?.()
break break
case 'poolSummary': // case 'poolSummary': //
poolSummaryRef.value?.loadData?.() customerPoolSummaryRef.value?.loadData?.()
break break
case 'dealCycle': // case 'dealCycle': //
dealCycleRef.value?.loadData?.() dealCycleRef.value?.loadData?.()