From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/crm/statistics/funnel/components/FunnelBusiness.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 149 insertions(+), 0 deletions(-)
diff --git a/src/views/crm/statistics/funnel/components/FunnelBusiness.vue b/src/views/crm/statistics/funnel/components/FunnelBusiness.vue
new file mode 100644
index 0000000..c4e4bf6
--- /dev/null
+++ b/src/views/crm/statistics/funnel/components/FunnelBusiness.vue
@@ -0,0 +1,149 @@
+<!-- 閿�鍞紡鏂楀垎鏋� -->
+<template>
+ <!-- Echarts鍥� -->
+ <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>
+ </el-col>
+ </el-row>
+ </el-card>
+
+ <!-- 缁熻鍒楄〃 -->
+ <el-card class="mt-16px" shadow="never">
+ <el-table v-loading="loading" :data="list">
+ <el-table-column align="center" label="搴忓彿" type="index" width="80" />
+ <el-table-column align="center" label="闃舵" prop="endStatus" width="200">
+ <template #default="scope">
+ <dict-tag :type="DICT_TYPE.CRM_BUSINESS_END_STATUS_TYPE" :value="scope.row.endStatus" />
+ </template>
+ </el-table-column>
+ <el-table-column align="center" label="鍟嗘満鏁�" min-width="200" prop="businessCount" />
+ <el-table-column align="center" label="鍟嗘満鎬婚噾棰�(鍏�)" min-width="200" prop="totalPrice" />
+ </el-table>
+ </el-card>
+</template>
+<script lang="ts" setup>
+import { CrmStatisticFunnelRespVO, StatisticFunnelApi } from '@/api/crm/statistics/funnel'
+import { EChartsOption } from 'echarts'
+import { DICT_TYPE } from '@/utils/dict'
+
+defineOptions({ name: 'FunnelBusiness' })
+const props = defineProps<{ queryParams: any }>() // 鎼滅储鍙傛暟
+
+const active = ref(true)
+const loading = ref(false) // 鍔犺浇涓�
+const list = ref<CrmStatisticFunnelRespVO[]>([]) // 鍒楄〃鐨勬暟鎹�
+
+/** 閿�鍞紡鏂� */
+const echartsOption = reactive<EChartsOption>({
+ title: {
+ text: '閿�鍞紡鏂�'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b}'
+ },
+ toolbox: {
+ feature: {
+ dataView: { readOnly: false },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ legend: {
+ data: ['瀹㈡埛', '鍟嗘満', '璧㈠崟']
+ },
+ series: [
+ {
+ name: '閿�鍞紡鏂�',
+ type: 'funnel',
+ left: '10%',
+ top: 60,
+ bottom: 60,
+ width: '80%',
+ min: 0,
+ max: 100,
+ minSize: '0%',
+ maxSize: '100%',
+ sort: 'descending',
+ gap: 2,
+ label: {
+ show: true,
+ position: 'inside'
+ },
+ labelLine: {
+ length: 10,
+ lineStyle: {
+ width: 1,
+ type: 'solid'
+ }
+ },
+ itemStyle: {
+ borderColor: '#fff',
+ borderWidth: 1
+ },
+ emphasis: {
+ label: {
+ fontSize: 20
+ }
+ },
+ data: [
+ { value: 60, name: '瀹㈡埛-0涓�' },
+ { value: 40, name: '鍟嗘満-0涓�' },
+ { value: 20, name: '璧㈠崟-0涓�' }
+ ]
+ }
+ ]
+}) as EChartsOption
+
+const handleActive = async (val: boolean) => {
+ active.value = val
+ await loadData()
+}
+
+/** 鑾峰彇缁熻鏁版嵁 */
+const loadData = async () => {
+ loading.value = true
+ // 1. 鍔犺浇婕忔枟鏁版嵁
+ const data = (await StatisticFunnelApi.getFunnelSummary(
+ props.queryParams
+ )) as CrmStatisticFunnelRespVO
+ // 2.1 鏇存柊 Echarts 鏁版嵁
+ if (
+ !!data &&
+ echartsOption.series &&
+ echartsOption.series[0] &&
+ echartsOption.series[0]['data']
+ ) {
+ // tips锛氬啓姝� value 鍊兼槸涓轰簡淇濇寔婕忔枟椤哄簭涓嶅彉
+ const list: { value: number; name: string }[] = []
+ 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.getBusinessSummaryByEndStatus(props.queryParams)
+ loading.value = false
+}
+defineExpose({ loadData })
+
+/** 鍒濆鍖� */
+onMounted(() => {
+ loadData()
+})
+</script>
--
Gitblit v1.8.0