lxd/FlowVue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Merge pull request !428 from puhui999/dev-crm
This commit is contained in:
芋道源码 2024-04-18 01:10:12 +00:00 committed by Gitee
commit 50ab864698
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 360 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/crm/statistics/funnel.ts
View File

@ -3,13 +3,19 @@ import request from '@/config/axios'
export interface CrmStatisticFunnelRespVO {
customerCount: number // 客户数
businessCount: number // 商机数
winCount: number // 赢单数
businessWinCount: number // 赢单数
}
export interface CrmStatisticsBusinessSummaryByDateRespVO {
time: string // 时间
businessCreateCount: number // 商机数
businessDealCount: number // 商机金额
totalPrice: number | string // 商机金额
}
export interface CrmStatisticsBusinessInversionRateSummaryByDateRespVO {
time: string // 时间
businessCount: number // 商机数量
businessWinCount: number // 赢单商机数
}
// 客户分析 API
@ -22,9 +28,9 @@ export const StatisticFunnelApi = {
})
},
// 2. 获取商机结束状态统计
getBusinessEndStatusSummary: (params: any) => {
getBusinessSummaryByEndStatus: (params: any) => {
return request.get({
url: '/crm/statistics-funnel/get-business-end-status-summary',
url: '/crm/statistics-funnel/get-business-summary-by-end-status',
params
})
},
@ -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',

307
src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue Normal file
View File

@ -0,0 +1,307 @@
<!-- 客户总量统计 -->
<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>({
color: ['#6ca2ff', '#6ac9d7', '#ff7474'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['赢单转化率', '商机总数', '赢单商机数'],
bottom: '0px',
itemWidth: 14
},
grid: {
top: '40px',
left: '40px',
right: '40px',
bottom: '40px',
containLabel: true,
borderColor: '#fff'
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true,
lineStyle: { width: 0 }
},
axisLabel: {
color: '#BDBDBD'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: { color: '#BDBDBD' }
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'value',
name: '赢单转化率',
axisTick: {
alignWithLabel: true,
lineStyle: { width: 0 }
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}%'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: { color: '#BDBDBD' }
},
splitLine: {
show: false
}
},
{
type: 'value',
name: '商机数',
axisTick: {
alignWithLabel: true,
lineStyle: { width: 0 }
},
axisLabel: {
color: '#BDBDBD',
formatter: '{value}个'
},
/** 坐标轴轴线相关设置 */
axisLine: {
lineStyle: { color: '#BDBDBD' }
},
splitLine: {
show: false
}
}
],
series: [
{
name: '赢单转化率',
type: 'line',
yAxisIndex: 0,
data: []
},
{
name: '商机总数',
type: 'bar',
yAxisIndex: 1,
barWidth: 15,
data: []
},
{
name: '赢单商机数',
type: 'bar',
yAxisIndex: 1,
barWidth: 15,
data: []
}
]
}) as EChartsOption
/** 获取数据并填充图表 */
const fetchAndFill = async () => {
// 1. 加载统计数据
const businessSummaryByDate = await StatisticFunnelApi.getBusinessInversionRateSummaryByDate(
props.queryParams
)
// 2.1 更新 Echarts 数据
if (echartsOption.xAxis && echartsOption.xAxis[0] && echartsOption.xAxis[0]['data']) {
echartsOption.xAxis[0]['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) =>
erpCalculatePercentage(s.businessWinCount, s.businessCount)
)
}
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessCount
)
}
if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
echartsOption.series[2]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessInversionRateSummaryByDateRespVO) => s.businessWinCount
)
}
// 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>

6
src/views/crm/statistics/funnel/components/BusinessSummary.vue
View File

@ -118,7 +118,7 @@ const queryParams0 = reactive({
const loading = ref(false) // 加载中
const list = ref([]) // 列表的数据
const total = ref(0)
/** 将传进来的值赋值给 formData */
/** 将传进来的值赋值给 queryParams0 */
watch(
() => props.queryParams,
(data) => {
@ -163,7 +163,7 @@ const echartsOption = reactive<EChartsOption>({
brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
},
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片
saveAsImage: { show: true, name: '新增商机分析' } // 保存为图片
}
},
tooltip: {
@ -216,7 +216,7 @@ const fetchAndFill = async () => {
}
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.businessDealCount
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.totalPrice
)
}

25
src/views/crm/statistics/funnel/components/FunnelBusiness.vue
View File

@ -4,6 +4,10 @@
<el-card shadow="never">
<el-row>
<el-col :span="24">
<el-button-group class="mb-10px">
<el-button type="primary" @click="handleActive(true)">客户视角</el-button>
<el-button type="primary" @click="handleActive(false)">动态视角</el-button>
</el-button-group>
<el-skeleton :loading="loading" animated>
<Echart :height="500" :options="echartsOption" />
</el-skeleton>
@ -35,6 +39,7 @@ import { FunnelChart } from 'echarts/charts'
defineOptions({ name: 'FunnelBusiness' })
const props = defineProps<{ queryParams: any }>() // 搜索参数
const active = ref(true)
const loading = ref(false) // 加载中
const list = ref<CrmStatisticFunnelRespVO[]>([]) // 列表的数据
@ -101,6 +106,11 @@ const echartsOption = reactive<EChartsOption>({
]
}) as EChartsOption
const handleActive = async (val: boolean) => {
active.value = val
await loadData()
}
/** 获取统计数据 */
const loadData = async () => {
loading.value = true
@ -117,13 +127,20 @@ const loadData = async () => {
) {
// tips：写死 value 值是为了保持漏斗顺序不变
const list: { value: number; name: string }[] = []
list.push({ value: 60, name: `客户-${data.customerCount || 0}个` })
list.push({ value: 40, name: `商机-${data.businessCount || 0}个` })
list.push({ value: 20, name: `赢单-${data.winCount || 0}个` })
if (active.value) {
list.push({ value: 60, name: `客户-${data.customerCount || 0}个` })
list.push({ value: 40, name: `商机-${data.businessCount || 0}个` })
list.push({ value: 20, name: `赢单-${data.businessWinCount || 0}个` })
} else {
list.push({ value: data.customerCount || 0, name: `客户-${data.customerCount || 0}个` })
list.push({ value: data.businessCount || 0, name: `商机-${data.businessCount || 0}个` })
list.push({ value: data.businessWinCount || 0, name: `赢单-${data.businessWinCount || 0}个` })
}
echartsOption.series[0]['data'] = list
}
// 2.2 获取商机结束状态统计
list.value = await StatisticFunnelApi.getBusinessEndStatusSummary(props.queryParams)
list.value = await StatisticFunnelApi.getBusinessSummaryByEndStatus(props.queryParams)
loading.value = false
}
defineExpose({ loadData })

14
src/views/crm/statistics/funnel/index.vue
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
}
}

2
src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
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('回族自治区', '')