feat(销售漏斗): 添加团队销售漏斗功能并集成到组件中
- 在api模块添加getTeamSalesFunnel接口 - GroupRanking组件新增teamSalesFunnel属性监听 - seniorManager页面集成销售漏斗数据获取和传递 - 实现销售漏斗数据自动更新图表功能
This commit is contained in:
@@ -45,7 +45,11 @@ export const getTimeoutRate = (params) => {
|
|||||||
export const getTableFillingRate = (params) => {
|
export const getTableFillingRate = (params) => {
|
||||||
return https.post('/api/v1/level_three/overview/table_filling_rate', params)
|
return https.post('/api/v1/level_three/overview/table_filling_rate', params)
|
||||||
}
|
}
|
||||||
// 销售漏斗
|
|
||||||
|
// 销售漏斗 /api/v1/level_three/overview/team_sales_funnel
|
||||||
|
export const getTeamSalesFunnel = (params) => {
|
||||||
|
return https.post('/api/v1/level_three/overview/team_sales_funnel', params)
|
||||||
|
}
|
||||||
|
|
||||||
// 客户迫切解决的问题 /api/v1/level_three/overview/urgent_need_to_address
|
// 客户迫切解决的问题 /api/v1/level_three/overview/urgent_need_to_address
|
||||||
export const getUrgentNeedToAddress = (params) => {
|
export const getUrgentNeedToAddress = (params) => {
|
||||||
|
|||||||
@@ -13,13 +13,17 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, reactive, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
|
||||||
import Chart from 'chart.js/auto'
|
import Chart from 'chart.js/auto'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
selectedGroup: {
|
selectedGroup: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
teamSalesFunnel: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -35,6 +39,19 @@ const funnelData = reactive({
|
|||||||
data: [120, 90, 45, 18, 10],
|
data: [120, 90, 45, 18, 10],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 监听teamSalesFunnel变化并更新图表数据
|
||||||
|
watch(() => props.teamSalesFunnel, (newVal) => {
|
||||||
|
if (newVal && Object.keys(newVal).length > 0) {
|
||||||
|
// 按照固定顺序提取数据
|
||||||
|
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||||
|
funnelData.data = order.map(key => newVal[key] || 0)
|
||||||
|
// 确保在DOM更新后再更新图表
|
||||||
|
nextTick(() => {
|
||||||
|
renderPersonalFunnelChart()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, { deep: true })
|
||||||
|
|
||||||
// Chart.js: 创建或更新图表
|
// Chart.js: 创建或更新图表
|
||||||
const createOrUpdateChart = (chartId, canvasRef, config) => {
|
const createOrUpdateChart = (chartId, canvasRef, config) => {
|
||||||
if (chartInstances[chartId]) {
|
if (chartInstances[chartId]) {
|
||||||
@@ -72,6 +89,11 @@ const renderPersonalFunnelChart = () => {
|
|||||||
|
|
||||||
// 生命周期钩子
|
// 生命周期钩子
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
// 处理初始传入的teamSalesFunnel数据
|
||||||
|
if (props.teamSalesFunnel && Object.keys(props.teamSalesFunnel).length > 0) {
|
||||||
|
const order = ['线索', '加微', '到课', '定金', '成交']
|
||||||
|
funnelData.data = order.map(key => props.teamSalesFunnel[key] || 0)
|
||||||
|
}
|
||||||
renderPersonalFunnelChart()
|
renderPersonalFunnelChart()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -70,6 +70,7 @@
|
|||||||
<div v-if="cardVisibility.groupRanking" class="left-section">
|
<div v-if="cardVisibility.groupRanking" class="left-section">
|
||||||
<GroupRanking
|
<GroupRanking
|
||||||
:groups="groups"
|
:groups="groups"
|
||||||
|
:teamSalesFunnel="teamSalesFunnel"
|
||||||
:selected-group="selectedGroup"
|
:selected-group="selectedGroup"
|
||||||
@select-group="selectGroup"
|
@select-group="selectGroup"
|
||||||
/>
|
/>
|
||||||
@@ -201,7 +202,7 @@ import UserDropdown from '@/components/UserDropdown.vue'
|
|||||||
import Loading from '@/components/Loading.vue'
|
import Loading from '@/components/Loading.vue'
|
||||||
import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount,
|
import { getOverallTeamPerformance,getTotalGroupCount,getConversionRate,getTotalCallCount,
|
||||||
getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime,
|
getNewCustomer,getDepositConversionRate,getActiveCustomerCommunicationRate,getAverageAnswerTime,
|
||||||
getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,getAbnormalResponseRate } from '@/api/senorManger.js'
|
getTimeoutRate,getTableFillingRate,getUrgentNeedToAddress,getTeamRanking,getTeamRankingInfo,getAbnormalResponseRate,getTeamSalesFunnel } from '@/api/senorManger.js'
|
||||||
|
|
||||||
import { useUserStore } from '@/stores/user.js'
|
import { useUserStore } from '@/stores/user.js'
|
||||||
import FeedbackForm from "@/components/FeedbackForm.vue";
|
import FeedbackForm from "@/components/FeedbackForm.vue";
|
||||||
@@ -534,6 +535,41 @@ const statisticalIndicators = ref({
|
|||||||
formCompletionRate: 0,
|
formCompletionRate: 0,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 销售漏斗
|
||||||
|
const teamSalesFunnel = ref({})
|
||||||
|
async function GetTeamSalesFunnel() {
|
||||||
|
const params = getRequestParams()
|
||||||
|
const hasParams = params.user_name
|
||||||
|
const requestParams = hasParams ? {
|
||||||
|
...params,
|
||||||
|
check_type: CheckType.value
|
||||||
|
} : {check_type: CheckType.value}
|
||||||
|
const res = await getTeamSalesFunnel(requestParams)
|
||||||
|
if (res.code === 200) {
|
||||||
|
teamSalesFunnel.value = res.data
|
||||||
|
/**
|
||||||
|
* data
|
||||||
|
:
|
||||||
|
{线索: 738, 加微: 404, 到课: 942, 定金: 43, 成交: 57}
|
||||||
|
到课
|
||||||
|
:
|
||||||
|
942
|
||||||
|
加微
|
||||||
|
:
|
||||||
|
404
|
||||||
|
定金
|
||||||
|
:
|
||||||
|
43
|
||||||
|
成交
|
||||||
|
:
|
||||||
|
57
|
||||||
|
线索
|
||||||
|
:
|
||||||
|
738
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 团队异常
|
// 团队异常
|
||||||
const teamAlerts = ref({})
|
const teamAlerts = ref({})
|
||||||
// 异常预警
|
// 异常预警
|
||||||
@@ -742,6 +778,7 @@ onMounted(async ()=>{
|
|||||||
await fetchOverallTeamPerformance()
|
await fetchOverallTeamPerformance()
|
||||||
await fetchActiveGroups()
|
await fetchActiveGroups()
|
||||||
await fetchConversionRate()
|
await fetchConversionRate()
|
||||||
|
await GetTeamSalesFunnel()
|
||||||
await fetchTotalCallCount()
|
await fetchTotalCallCount()
|
||||||
await fetchNewCustomers()
|
await fetchNewCustomers()
|
||||||
await fetchDepositConversions()
|
await fetchDepositConversions()
|
||||||
|
|||||||
Reference in New Issue
Block a user