CRM 营销数据报表 - 前端文档

概述

本次改造实现营销数据报表功能，提供客户分析、商机分析、合同分析、销售漏斗、销售业绩等多维度统计分析。

一、改造清单

后端改造（已完成）

二、涉及页面

CRM 报表模块

三、API 接口

CRM 营销报表 API

请求参数

响应示例

客户分析：

{
  "code": 0,
  "data": {
    "totalCount": 1000,
    "todayCount": 15,
    "dealCount": 300,
    "dealRate": 30.00,
    "lockCount": 50,
    "poolCount": 200
  }
}

商机分析：

{
  "code": 0,
  "data": {
    "totalCount": 500,
    "todayCount": 8,
    "totalPrice": 5000000.00,
    "successCount": 150,
    "successPrice": 2000000.00,
    "successRate": 30.00,
    "processingCount": 250,
    "failCount": 100
  }
}

合同分析：

{
  "code": 0,
  "data": {
    "totalCount": 400,
    "todayCount": 5,
    "totalPrice": 3000000.00,
    "approveCount": 300,
    "approvePrice": 2500000.00,
    "processCount": 20,
    "receivablePrice": 1500000.00,
    "receivableRate": 60.00
  }
}

销售漏斗：

{
  "code": 0,
  "data": {
    "stages": [
      { "name": "客户", "count": 1000, "price": 0, "conversionRate": 100.00 },
      { "name": "商机", "count": 500, "price": 5000000.00, "conversionRate": 50.00 },
      { "name": "合同", "count": 300, "price": 2500000.00, "conversionRate": 30.00 },
      { "name": "回款", "count": null, "price": 1500000.00, "conversionRate": 15.00 }
    ]
  }
}

销售业绩：

{
  "code": 0,
  "data": {
    "items": [
      {
        "userId": 1,
        "userName": "张三",
        "deptName": "销售一部",
        "contractCount": 50,
        "contractPrice": 500000.00,
        "receivablePrice": 300000.00,
        "businessCount": 80,
        "businessPrice": 800000.00
      }
    ]
  }
}

四、前端修改点

4.1 报表概览页面

文件路径： /src/views/crm/report/dashboard.vue

<template>
  <div class="report-dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">客户总数</div>
          <div class="stat-value">{{ customerAnalyze.totalCount }}</div>
          <div class="stat-footer">今日新增：{{ customerAnalyze.todayCount }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">商机总数</div>
          <div class="stat-value">{{ businessAnalyze.totalCount }}</div>
          <div class="stat-footer">转化率：{{ businessAnalyze.successRate }}%</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">合同金额</div>
          <div class="stat-value">¥{{ contractAnalyze.totalPrice }}</div>
          <div class="stat-footer">已回款：¥{{ contractAnalyze.receivablePrice }}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-title">回款率</div>
          <div class="stat-value">{{ contractAnalyze.receivableRate }}%</div>
          <div class="stat-footer">审批通过：{{ contractAnalyze.approveCount }}份</div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 销售漏斗 -->
    <el-card header="销售漏斗">
      <FunnelChart :data="funnelData" />
    </el-card>

    <!-- 销售业绩排行 -->
    <el-card header="销售业绩排行">
      <el-table :data="performanceData" stripe>
        <el-table-column prop="userName" label="销售人员" />
        <el-table-column prop="deptName" label="部门" />
        <el-table-column prop="contractCount" label="合同数量" width="100" />
        <el-table-column prop="contractPrice" label="合同金额" width="150" />
        <el-table-column prop="receivablePrice" label="回款金额" width="150" />
        <el-table-column prop="businessCount" label="商机数量" width="100" />
        <el-table-column prop="businessPrice" label="商机金额" width="150" />
      </el-table>
    </el-card>
  </div>
</template>

4.2 销售漏斗组件

文件路径： /src/components/FunnelChart.vue

<template>
  <div class="funnel-chart">
    <div v-for="(stage, index) in data" :key="index" class="funnel-stage">
      <div class="funnel-bar" :style="getBarStyle(stage, index)">
        <span class="stage-name">{{ stage.name }}</span>
        <span class="stage-value">{{ stage.price > 0 ? '¥' + stage.price : stage.count }}</span>
      </div>
      <div class="conversion-rate">转化率：{{ stage.conversionRate }}%</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Array
  },
  methods: {
    getBarStyle(stage, index) {
      const maxWidth = 100
      const width = maxWidth - (index * 15)
      return {
        width: `${width}%`,
        backgroundColor: this.getColor(index)
      }
    },
    getColor(index) {
      const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
      return colors[index] || '#909399'
    }
  }
}
</script>

4.3 API 定义

文件路径： /src/api/crm/report.js

import request from '@/utils/request'

// 获取客户分析统计
export function getCustomerAnalyze(startTime, endTime) {
  return request({
    url: '/crm/report/get-customer-analyze',
    method: 'get',
    params: { startTime, endTime }
  })
}

// 获取商机分析统计
export function getBusinessAnalyze(startTime, endTime) {
  return request({
    url: '/crm/report/get-business-analyze',
    method: 'get',
    params: { startTime, endTime }
  })
}

// 获取合同分析统计
export function getContractAnalyze(startTime, endTime) {
  return request({
    url: '/crm/report/get-contract-analyze',
    method: 'get',
    params: { startTime, endTime }
  })
}

// 获取销售漏斗统计
export function getSalesFunnel() {
  return request({
    url: '/crm/report/get-sales-funnel',
    method: 'get'
  })
}

// 获取销售业绩统计
export function getSalesPerformance(startTime, endTime) {
  return request({
    url: '/crm/report/get-sales-performance',
    method: 'get',
    params: { startTime, endTime }
  })
}

五、图表展示建议

5.1 客户分析图表

• 客户增长趋势图：折线图展示每日/每周/每月新增客户
• 客户成交率饼图：已成交 vs 未成交客户比例
• 客户来源分布：饼图展示不同来源的客户占比

5.2 商机分析图表

• 商机阶段分布：饼图展示不同状态的商机数量
• 商机金额分布：柱状图展示不同金额区间的商机数量
• 商机转化趋势：折线图展示转化率变化

5.3 合同分析图表

• 合同金额趋势：折线图展示合同金额变化
• 合同状态分布：饼图展示不同审批状态的合同
• 回款进度图：进度条展示回款完成度

5.4 销售漏斗图

• 使用横向漏斗图展示各阶段转化情况
• 每个阶段显示数量和金额
• 自动计算转化率

六、注意事项

1. 数据权限：报表数据需要根据用户权限过滤
2. 统计口径：明确各类统计数据的计算逻辑
3. 时间范围：支持自定义时间范围查询
4. 数据刷新：考虑数据缓存和刷新策略
5. 导出功能：支持报表数据导出为 Excel

七、后续计划