Skip to content

phsl / admin

Go to a project
Commit 50ab8646 by 芋道源码 Committed by Gitee
Options

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

Merge pull request !428 from puhui999/dev-crm
parents b1c832d2 4e640bae
Showing with 360 additions and 17 deletions
src/api/crm/statistics/funnel.ts
...@@ -3,13 +3,19 @@ import request from '@/config/axios' ...@@ -3,13 +3,19 @@ import request from '@/config/axios'
export interface CrmStatisticFunnelRespVO { export interface CrmStatisticFunnelRespVO {
customerCount: number // 客户数 customerCount: number // 客户数
businessCount: number // 商机数 businessCount: number // 商机数
winCount: number // 赢单数 businessWinCount: number // 赢单数
} }
export interface CrmStatisticsBusinessSummaryByDateRespVO { export interface CrmStatisticsBusinessSummaryByDateRespVO {
time: string // 时间 time: string // 时间
businessCreateCount: number // 商机数 businessCreateCount: number // 商机数
businessDealCount: number // 商机金额 totalPrice: number | string // 商机金额
}
export interface CrmStatisticsBusinessInversionRateSummaryByDateRespVO {
time: string // 时间
businessCount: number // 商机数量
businessWinCount: number // 赢单商机数
} }
// 客户分析 API // 客户分析 API
...@@ -22,9 +28,9 @@ export const StatisticFunnelApi = { ...@@ -22,9 +28,9 @@ export const StatisticFunnelApi = {
}) })
}, },
// 2. 获取商机结束状态统计 // 2. 获取商机结束状态统计
getBusinessEndStatusSummary: (params: any) => { getBusinessSummaryByEndStatus: (params: any) => {
return request.get({ return request.get({
url: '/crm/statistics-funnel/get-business-end-status-summary', url: '/crm/statistics-funnel/get-business-summary-by-end-status',
params params
}) })
}, },
...@@ -35,7 +41,14 @@ export const StatisticFunnelApi = { ...@@ -35,7 +41,14 @@ export const StatisticFunnelApi = {
params 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) => { getBusinessPageByDate: (params: any) => {
return request.get({ return request.get({
url: '/crm/statistics-funnel/get-business-page-by-date', url: '/crm/statistics-funnel/get-business-page-by-date',
......
src/views/crm/statistics/funnel/components/BusinessInversionRateSummary.vue 0 → 100644
<!-- 客户总量统计 -->
<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>
src/views/crm/statistics/funnel/components/BusinessSummary.vue
...@@ -118,7 +118,7 @@ const queryParams0 = reactive({ ...@@ -118,7 +118,7 @@ const queryParams0 = reactive({
const loading = ref(false) // 加载中 const loading = ref(false) // 加载中
const list = ref([]) // 列表的数据 const list = ref([]) // 列表的数据
const total = ref(0) const total = ref(0)
/** 将传进来的值赋值给 formData */ /** 将传进来的值赋值给 queryParams0 */
watch( watch(
() => props.queryParams, () => props.queryParams,
(data) => { (data) => {
...@@ -163,7 +163,7 @@ const echartsOption = reactive<EChartsOption>({ ...@@ -163,7 +163,7 @@ const echartsOption = reactive<EChartsOption>({
brush: { brush: {
type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮 type: ['lineX', 'clear'] // 区域缩放按钮、还原按钮
}, },
saveAsImage: { show: true, name: '客户总量分析' } // 保存为图片 saveAsImage: { show: true, name: '新增商机分析' } // 保存为图片
} }
}, },
tooltip: { tooltip: {
...@@ -216,7 +216,7 @@ const fetchAndFill = async () => { ...@@ -216,7 +216,7 @@ const fetchAndFill = async () => {
} }
if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) { if (echartsOption.series && echartsOption.series[1] && echartsOption.series[1]['data']) {
echartsOption.series[1]['data'] = businessSummaryByDate.map( echartsOption.series[1]['data'] = businessSummaryByDate.map(
(s: CrmStatisticsBusinessSummaryByDateRespVO) => s.businessDealCount (s: CrmStatisticsBusinessSummaryByDateRespVO) => s.totalPrice
) )
} }
......
src/views/crm/statistics/funnel/components/FunnelBusiness.vue
...@@ -4,6 +4,10 @@ ...@@ -4,6 +4,10 @@
<el-card shadow="never"> <el-card shadow="never">
<el-row> <el-row>
<el-col :span="24"> <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> <el-skeleton :loading="loading" animated>
<Echart :height="500" :options="echartsOption" /> <Echart :height="500" :options="echartsOption" />
</el-skeleton> </el-skeleton>
...@@ -35,6 +39,7 @@ import { FunnelChart } from 'echarts/charts' ...@@ -35,6 +39,7 @@ import { FunnelChart } from 'echarts/charts'
defineOptions({ name: 'FunnelBusiness' }) defineOptions({ name: 'FunnelBusiness' })
const props = defineProps<{ queryParams: any }>() // 搜索参数 const props = defineProps<{ queryParams: any }>() // 搜索参数
const active = ref(true)
const loading = ref(false) // 加载中 const loading = ref(false) // 加载中
const list = ref<CrmStatisticFunnelRespVO[]>([]) // 列表的数据 const list = ref<CrmStatisticFunnelRespVO[]>([]) // 列表的数据
...@@ -101,6 +106,11 @@ const echartsOption = reactive<EChartsOption>({ ...@@ -101,6 +106,11 @@ const echartsOption = reactive<EChartsOption>({
] ]
}) as EChartsOption }) as EChartsOption
const handleActive = async (val: boolean) => {
active.value = val
await loadData()
}
/** 获取统计数据 */ /** 获取统计数据 */
const loadData = async () => { const loadData = async () => {
loading.value = true loading.value = true
...@@ -117,13 +127,20 @@ const loadData = async () => { ...@@ -117,13 +127,20 @@ const loadData = async () => {
) { ) {
// tips：写死 value 值是为了保持漏斗顺序不变 // tips：写死 value 值是为了保持漏斗顺序不变
const list: { value: number; name: string }[] = [] const list: { value: number; name: string }[] = []
list.push({ value: 60, name: `客户-${data.customerCount || 0}个` }) if (active.value) {
list.push({ value: 40, name: `商机-${data.businessCount || 0}个` }) list.push({ value: 60, name: `客户-${data.customerCount || 0}个` })
list.push({ value: 20, name: `赢单-${data.winCount || 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 echartsOption.series[0]['data'] = list
} }
// 2.2 获取商机结束状态统计 // 2.2 获取商机结束状态统计
list.value = await StatisticFunnelApi.getBusinessEndStatusSummary(props.queryParams) list.value = await StatisticFunnelApi.getBusinessSummaryByEndStatus(props.queryParams)
loading.value = false loading.value = false
} }
defineExpose({ loadData }) defineExpose({ loadData })
......
src/views/crm/statistics/funnel/index.vue
...@@ -87,7 +87,12 @@ ...@@ -87,7 +87,12 @@
<el-tab-pane label="新增商机分析" lazy name="businessSummaryRef"> <el-tab-pane label="新增商机分析" lazy name="businessSummaryRef">
<BusinessSummary ref="businessSummaryRef" :query-params="queryParams" /> <BusinessSummary ref="businessSummaryRef" :query-params="queryParams" />
</el-tab-pane> </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-tabs>
</el-col> </el-col>
</template> </template>
...@@ -100,6 +105,7 @@ import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/form ...@@ -100,6 +105,7 @@ import { beginOfDay, defaultShortcuts, endOfDay, formatDate } from '@/utils/form
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
import FunnelBusiness from './components/FunnelBusiness.vue' import FunnelBusiness from './components/FunnelBusiness.vue'
import BusinessSummary from './components/BusinessSummary.vue' import BusinessSummary from './components/BusinessSummary.vue'
import BusinessInversionRateSummary from './components/BusinessInversionRateSummary.vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'CrmStatisticsFunnel' }) defineOptions({ name: 'CrmStatisticsFunnel' })
...@@ -129,7 +135,7 @@ const userListByDeptId = computed(() => ...@@ -129,7 +135,7 @@ const userListByDeptId = computed(() =>
const activeTab = ref('funnelRef') // 活跃标签 const activeTab = ref('funnelRef') // 活跃标签
const funnelRef = ref() // 销售漏斗 const funnelRef = ref() // 销售漏斗
const businessSummaryRef = ref() // 新增商机分析 const businessSummaryRef = ref() // 新增商机分析
const sourceRef = ref() // 客户来源 const businessInversionRateSummaryRef = ref() // 商机转化率分析
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
...@@ -140,8 +146,8 @@ const handleQuery = () => { ...@@ -140,8 +146,8 @@ const handleQuery = () => {
case 'businessSummaryRef': case 'businessSummaryRef':
businessSummaryRef.value?.loadData?.() businessSummaryRef.value?.loadData?.()
break break
case 'sourceRef': case 'businessInversionRateSummaryRef':
sourceRef.value?.loadData?.() businessInversionRateSummaryRef.value?.loadData?.()
break break
} }
} }
......
src/views/crm/statistics/portrait/components/PortraitCustomerArea.vue
...@@ -106,7 +106,7 @@ const loadData = async () => { ...@@ -106,7 +106,7 @@ const loadData = async () => {
areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => { areaStatisticsList.value = areaList.map((item: CrmStatisticCustomerAreaRespVO) => {
return { return {
...item, ...item,
areaName: item.areaName // TODO @puhui999：这里最好注释下原因哈, 🤣 我从 mall copy 过来的 areaName: item.areaName
// .replace('维吾尔自治区', '') // .replace('维吾尔自治区', '')
// .replace('壮族自治区', '') // .replace('壮族自治区', '')
// .replace('回族自治区', '') // .replace('回族自治区', '')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment