CRM: 新增商机赢单转化率分析

This commit is contained in:
puhui999 2024-04-15 16:32:48 +08:00
parent 6acfc77d08
commit 014d1f8cd2
5 changed files with 304 additions and 7 deletions

View File

@ -12,6 +12,12 @@ export interface CrmStatisticsBusinessSummaryByDateRespVO {
totalPrice: number | string // 商机金额
}
export interface CrmStatisticsBusinessInversionRateSummaryByDateRespVO {
time: string // 时间
businessCount: number // 商机数量
businessWinCount: number // 赢单商机数
}
// 客户分析 API
export const StatisticFunnelApi = {
// 1. 获取销售漏斗统计数据
@ -35,7 +41,14 @@ export const StatisticFunnelApi = {
params
})
},
// 4. 获取商机列表(按日期)
// 4. 获取商机转化率分析(按日期)
getBusinessInversionRateSummaryByDate: (params: any) => {
return request.get({
url: '/crm/statistics-funnel/get-business-inversion-rate-summary-by-date',
params
})
},
// 5. 获取商机列表(按日期)
getBusinessPageByDate: (params: any) => {
return request.get({
url: '/crm/statistics-funnel/get-business-page-by-date',

View File

@ -0,0 +1,278 @@
<!-- 客户总量统计 -->
<template>
<!-- Echarts图 -->
<el-card shadow="never">
<el-skeleton :loading="loading" animated>
<Echart :height="500" :options="echartsOption" />
</el-skeleton>
</el-card>
<!-- 统计列表 -->
<el-card class="mt-16px" shadow="never">
<el-table v-loading="loading" :data="list">
<el-table-column align="center" fixed="left" label="序号" type="index" width="80" />
<el-table-column align="center" fixed="left" label="商机名称" prop="name" width="160">
<template #default="scope">
<el-link :underline="false" type="primary" @click="openDetail(scope.row.id)">
{{ scope.row.name }}
</el-link>
</template>
</el-table-column>
<el-table-column align="center" fixed="left" label="客户名称" prop="customerName" width="120">
<template #default="scope">
<el-link
:underline="false"
type="primary"
@click="openCustomerDetail(scope.row.customerId)"
>
{{ scope.row.customerName }}
</el-link>
</template>
</el-table-column>
<el-table-column
:formatter="erpPriceTableColumnFormatter"
align="center"
label="商机金额(元)"
prop="totalPrice"
width="140"
/>
<el-table-column
:formatter="dateFormatter"
align="center"
label="预计成交日期"
prop="dealTime"
width="180px"
/>
<el-table-column align="center" label="备注" prop="remark" width="200" />
<el-table-column
:formatter="dateFormatter"
align="center"
label="下次联系时间"
prop="contactNextTime"
width="180px"
/>
<el-table-column align="center" label="负责人" prop="ownerUserName" width="100px" />
<el-table-column align="center" label="所属部门" prop="ownerUserDeptName" width="100px" />
<el-table-column
:formatter="dateFormatter"
align="center"
label="最后跟进时间"
prop="contactLastTime"
width="180px"
/>
<el-table-column
:formatter="dateFormatter"
align="center"
label="更新时间"
prop="updateTime"
width="180px"
/>
<el-table-column
:formatter="dateFormatter"
align="center"
label="创建时间"
prop="createTime"
width="180px"
/>
<el-table-column align="center" label="创建人" prop="creatorName" width="100px" />
<el-table-column
align="center"
fixed="right"
label="商机状态组"
prop="statusTypeName"
width="140"
/>
<el-table-column
align="center"
fixed="right"
label="商机阶段"
prop="statusName"
width="120"
/>
</el-table>
<!-- 分页 -->
<Pagination
v-model:limit="queryParams0.pageSize"
v-model:page="queryParams0.pageNo"
:total="total"
@pagination="getList"
/>
</el-card>
</template>
<script lang="ts" setup>
import {
CrmStatisticsBusinessInversionRateSummaryByDateRespVO,
StatisticFunnelApi
} from '@/api/crm/statistics/funnel'
import { EChartsOption } from 'echarts'
import { erpCalculatePercentage, erpPriceTableColumnFormatter } from '@/utils'
import { dateFormatter } from '@/utils/formatTime'
defineOptions({ name: 'BusinessSummary' })
const props = defineProps<{ queryParams: any }>() //
const queryParams0 = reactive({
pageNo: 1,
pageSize: 10
})
const loading = ref(false) //
const list = ref([]) //
const total = ref(0)
/** 将传进来的值赋值给 queryParams0 */
watch(
() => props.queryParams,
(data) => {
if (!data) {
return
}
const newObj = { ...queryParams0, ...data }
Object.assign(queryParams0, newObj)
},
{
immediate: true
}
)
/** 柱状图配置:纵向 */
const echartsOption = reactive<EChartsOption>({
grid: {
left: 30,
right: 30, // X
bottom: 20,
containLabel: true
},
legend: {},
series: [
{
name: '商机总数',
type: 'bar',
yAxisIndex: 0,
data: []
},
{
name: '赢单商机数',
type: 'bar',
yAxisIndex: 1,
data: []
},
{
name: '赢单转化率',
type: 'bar',
yAxisIndex: 2,
data: []
}
],
toolbox: {
feature: {
dataZoom: {
xAxisIndex: false // Y
},
brush: {
type: ['lineX', 'clear'] //
},
saveAsImage: { show: true, name: '商机转化率分析' } //
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
yAxis: [
{
type: 'value',
name: '商机总数',
min: 0,
minInterval: 1 //
},
{
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: '日期',
data: []
}
}) as EChartsOption
/** 获取数据并填充图表 */
const fetchAndFill = async () => {
// 1.
const businessSummaryByDate = await StatisticFunnelApi.getBusinessInversionRateSummaryByDate(
props.queryParams
)
// 2.1 Echarts
if (echartsOption.xAxis && echartsOption.xAxis['data']) {
echartsOption.xAxis['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.time
)
}
if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
echartsOption.series[0]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessCount
)
}
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessWinCount
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) =>
erpCalculatePercentage(s.businessWinCount, s.businessCount)
)
}
// 2.2
await getList()
}
/** 获取商机列表 */
const getList = async () => {
const data = await StatisticFunnelApi.getBusinessPageByDate(props.queryParams)
list.value = data.list
total.value = data.total
}
/** 打开客户详情 */
const { push } = useRouter()
const openDetail = (id: number) => {
push({ name: 'CrmBusinessDetail', params: { id } })
}
/** 打开客户详情 */
const openCustomerDetail = (id: number) => {
push({ name: 'CrmCustomerDetail', params: { id } })
}
/** 获取统计数据 */
const loadData = async () => {
loading.value = true
try {
await fetchAndFill()
} finally {
loading.value = false
}
}
defineExpose({ loadData })
/** 初始化 */
onMounted(() => {
loadData()
})
</script>

View File

@ -163,7 +163,7 @@ const echartsOption = reactive<EChartsOption>({
brush: {
type: ['lineX', 'clear'] //
},
saveAsImage: { show: true, name: '客户总量分析' } //
saveAsImage: { show: true, name: '新增商机分析' } //
}
},
tooltip: {

View File

@ -87,7 +87,12 @@
<el-tab-pane label="新增商机分析" lazy name="businessSummaryRef">
<BusinessSummary ref="businessSummaryRef" :query-params="queryParams" />
</el-tab-pane>
<el-tab-pane label="商机转化率分析" lazy name="sourceRef" />
<el-tab-pane label="商机转化率分析" lazy name="businessInversionRateSummaryRef">
<BusinessInversionRateSummary
ref="businessInversionRateSummaryRef"
:query-params="queryParams"
/>
</el-tab-pane>
</el-tabs>
</el-col>
</template>
@ -100,6 +105,7 @@ import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/form
import { defaultProps, handleTree } from '@/utils/tree'
import FunnelBusiness from './components/FunnelBusiness.vue'
import BusinessSummary from './components/BusinessSummary.vue'
import BusinessInversionRateSummary from './components/BusinessInversionRateSummary.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'CrmStatisticsFunnel' })
@ -129,7 +135,7 @@ const userListByDeptId = computed(() =>
const activeTab = ref('funnelRef') //
const funnelRef = ref() //
const businessSummaryRef = ref() //
const sourceRef = ref() //
const businessInversionRateSummaryRef = ref() //
/** 搜索按钮操作 */
const handleQuery = () => {
@ -140,8 +146,8 @@ const handleQuery = () => {
case 'businessSummaryRef':
businessSummaryRef.value?.loadData?.()
break
case 'sourceRef':
sourceRef.value?.loadData?.()
case 'businessInversionRateSummaryRef':
businessInversionRateSummaryRef.value?.loadData?.()
break
}
}

View File

@ -106,7 +106,7 @@ const loadData = async () => {
areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
return {
...item,
areaName: item.areaName // TODO @puhui999, 🤣 mall copy
areaName: item.areaName
// .replace('', '')
// .replace('', '')
// .replace('', '')