Browse Source

crm:code review 公海客户分析

YunaiV 1 year ago
parent
commit
e8a3745b5e

+ 3 - 4
src/views/crm/statistics/customer/components/CustomerConversionStat.vue

@@ -84,7 +84,7 @@ const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
   grid: {
     left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
     bottom: 20,
     containLabel: true
   },
@@ -155,9 +155,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
-  }
-  finally {
+    await fetchAndFill()
+  } finally {
     loading.value = false
   }
 }

+ 10 - 11
src/views/crm/statistics/customer/components/CustomerDealCycle.vue

@@ -26,7 +26,7 @@
 import {
   StatisticsCustomerApi,
   CrmStatisticsCustomerDealCycleByDateRespVO,
-  CrmStatisticsCustomerSummaryByDateRespVO,
+  CrmStatisticsCustomerSummaryByDateRespVO
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
 
@@ -41,7 +41,7 @@ const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的
 const echartsOption = reactive<EChartsOption>({
   grid: {
     left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
     bottom: 20,
     containLabel: true
   },
@@ -51,13 +51,13 @@ const echartsOption = reactive<EChartsOption>({
       name: '成交周期(天)',
       type: 'bar',
       data: [],
-      yAxisIndex: 0,
+      yAxisIndex: 0
     },
     {
       name: '成交客户数',
       type: 'bar',
       data: [],
-      yAxisIndex: 1,
+      yAxisIndex: 1
     }
   ],
   toolbox: {
@@ -82,7 +82,7 @@ const echartsOption = reactive<EChartsOption>({
       type: 'value',
       name: '成交周期(天)',
       min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
     },
     {
       type: 'value',
@@ -92,10 +92,10 @@ const echartsOption = reactive<EChartsOption>({
       splitLine: {
         lineStyle: {
           type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
         }
       }
-    },
+    }
   ],
   xAxis: {
     type: 'category',
@@ -110,7 +110,7 @@ const fetchAndFill = async () => {
   const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
     props.queryParams
   )
-    const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
+  const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
     props.queryParams
   )
   const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
@@ -140,9 +140,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
-  }
-  finally {
+    await fetchAndFill()
+  } finally {
     loading.value = false
   }
 }

+ 7 - 8
src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue

@@ -1,7 +1,7 @@
 <!-- 客户跟进次数分析 -->
 <template>
   <!-- Echarts图 -->
-  <el-card shadow="never" >
+  <el-card shadow="never">
     <el-skeleton :loading="loading" animated>
       <Echart :height="500" :options="echartsOption" />
     </el-skeleton>
@@ -28,7 +28,7 @@ import {
   CrmStatisticsFollowUpSummaryByDateRespVO,
   CrmStatisticsFollowUpSummaryByUserRespVO
 } from '@/api/crm/statistics/customer'
-import Echart from '@/components/Echart/src/Echart.vue';
+import Echart from '@/components/Echart/src/Echart.vue'
 import { EChartsOption } from 'echarts'
 
 defineOptions({ name: 'CustomerFollowupSummary' })
@@ -42,7 +42,7 @@ const list = ref<CrmStatisticsFollowUpSummaryByUserRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
   grid: {
     left: 20,
-    right: 30, // 让X轴右侧显示完整
+    right: 30, // 让 X 轴右侧显示完整
     bottom: 20,
     containLabel: true
   },
@@ -83,7 +83,7 @@ const echartsOption = reactive<EChartsOption>({
       type: 'value',
       name: '跟进客户数',
       min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
     },
     {
       type: 'value',
@@ -93,7 +93,7 @@ const echartsOption = reactive<EChartsOption>({
       splitLine: {
         lineStyle: {
           type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
         }
       }
     }
@@ -142,9 +142,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
-  }
-  finally {
+    await fetchAndFill()
+  } finally {
     loading.value = false
   }
 }

+ 2 - 3
src/views/crm/statistics/customer/components/CustomerFollowUpType.vue

@@ -105,9 +105,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
-  }
-  finally {
+    await fetchAndFill()
+  } finally {
     loading.value = false
   }
 }

+ 20 - 14
src/views/crm/statistics/customer/components/PoolSummary.vue → src/views/crm/statistics/customer/components/CustomerPoolSummary.vue

@@ -12,8 +12,18 @@
     <el-table v-loading="loading" :data="list">
       <el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
       <el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" />
-      <el-table-column label="进入公海客户数" align="right" prop="customerPutCount" min-width="200" />
-      <el-table-column label="公海领取客户数" align="right" prop="customerTakeCount" min-width="200" />
+      <el-table-column
+        label="进入公海客户数"
+        align="right"
+        prop="customerPutCount"
+        min-width="200"
+      />
+      <el-table-column
+        label="公海领取客户数"
+        align="right"
+        prop="customerTakeCount"
+        min-width="200"
+      />
     </el-table>
   </el-card>
 </template>
@@ -25,7 +35,7 @@ import {
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
 
-defineOptions({ name: 'CustomerSummary' })
+defineOptions({ name: 'CustomerPoolSummary' })
 
 const props = defineProps<{ queryParams: any }>() // 搜索参数
 
@@ -36,7 +46,7 @@ const list = ref<CrmStatisticsPoolSummaryByUserRespVO[]>([]) // 列表的数据
 const echartsOption = reactive<EChartsOption>({
   grid: {
     left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
     bottom: 20,
     containLabel: true
   },
@@ -77,7 +87,7 @@ const echartsOption = reactive<EChartsOption>({
       type: 'value',
       name: '进入公海客户数',
       min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
     },
     {
       type: 'value',
@@ -87,7 +97,7 @@ const echartsOption = reactive<EChartsOption>({
       splitLine: {
         lineStyle: {
           type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
         }
       }
     }
@@ -95,19 +105,15 @@ const echartsOption = reactive<EChartsOption>({
   xAxis: {
     type: 'category',
     name: '日期',
-    data: [],
+    data: []
   }
 }) as EChartsOption
 
 /** 获取数据并填充图表 */
 const fetchAndFill = async () => {
   // 1. 加载统计数据
-  const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(
-    props.queryParams
-  )
-  const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(
-    props.queryParams
-  )
+  const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(props.queryParams)
+  const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(props.queryParams)
   // 2.1 更新 Echarts 数据
   if (echartsOption.xAxis && echartsOption.xAxis['data']) {
     echartsOption.xAxis['data'] = poolSummaryByDate.map(
@@ -133,7 +139,7 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
+    await fetchAndFill()
   } finally {
     loading.value = false
   }

+ 5 - 5
src/views/crm/statistics/customer/components/CustomerSummary.vue

@@ -71,7 +71,7 @@ const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
   grid: {
     left: 20,
-    right: 30, // 让X轴右侧显示完整
+    right: 30, // 让 X 轴右侧显示完整
     bottom: 20,
     containLabel: true
   },
@@ -112,7 +112,7 @@ const echartsOption = reactive<EChartsOption>({
       type: 'value',
       name: '新增客户数',
       min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
     },
     {
       type: 'value',
@@ -122,7 +122,7 @@ const echartsOption = reactive<EChartsOption>({
       splitLine: {
         lineStyle: {
           type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
         }
       }
     }
@@ -130,7 +130,7 @@ const echartsOption = reactive<EChartsOption>({
   xAxis: {
     type: 'category',
     name: '日期',
-    data: [],
+    data: []
   }
 }) as EChartsOption
 
@@ -168,7 +168,7 @@ const fetchAndFill = async () => {
 const loadData = async () => {
   loading.value = true
   try {
-    fetchAndFill()
+    await fetchAndFill()
   } finally {
     loading.value = false
   }

+ 5 - 6
src/views/crm/statistics/customer/index.vue

@@ -46,8 +46,7 @@
           class="!w-240px"
           node-key="id"
           placeholder="请选择归属部门"
-          @change="queryParams.userId = undefined;handleQuery()
-          "
+          @change="(queryParams.userId = undefined), handleQuery()"
         />
       </el-form-item>
       <el-form-item label="员工" prop="userId">
@@ -100,7 +99,7 @@
       </el-tab-pane>
       <!-- 公海客户分析 -->
       <el-tab-pane label="公海客户分析" lazy name="poolSummary">
-        <PoolSummary ref="poolSummaryRef" :query-params="queryParams" />
+        <CustomerPoolSummary ref="customerPoolSummaryRef" :query-params="queryParams" />
       </el-tab-pane>
       <!-- 成交周期分析 -->
       <el-tab-pane label="成交周期分析" lazy name="dealCycle">
@@ -122,7 +121,7 @@ import CustomerDealCycle from './components/CustomerDealCycle.vue'
 import CustomerFollowUpSummary from './components/CustomerFollowUpSummary.vue'
 import CustomerFollowUpType from './components/CustomerFollowUpType.vue'
 import CustomerSummary from './components/CustomerSummary.vue'
-import PoolSummary from './components/PoolSummary.vue'
+import CustomerPoolSummary from './components/CustomerPoolSummary.vue'
 
 defineOptions({ name: 'CrmStatisticsCustomer' })
 
@@ -153,7 +152,7 @@ const customerSummaryRef = ref() // 1. 客户总量分析
 const followUpSummaryRef = ref() // 2. 客户跟进次数分析
 const followUpTypeRef = ref() // 3. 客户跟进方式分析
 const conversionStatRef = ref() // 4. 客户转化率分析
-const poolSummaryRef = ref() // 5. 客户公海分析
+const customerPoolSummaryRef = ref() // 5. 客户公海分析
 const dealCycleRef = ref() // 6. 成交周期分析
 
 /** 搜索按钮操作 */
@@ -172,7 +171,7 @@ const handleQuery = () => {
       conversionStatRef.value?.loadData?.()
       break
     case 'poolSummary': // 公海客户分析
-      poolSummaryRef.value?.loadData?.()
+      customerPoolSummaryRef.value?.loadData?.()
       break
     case 'dealCycle': // 成交周期分析
       dealCycleRef.value?.loadData?.()