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

## 概述

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

---

## 一、改造清单

### 后端改造（已完成）

| 文件 | 改动说明 |
|------|----------|
| `CrmReportApi.java` | 营销报表 API 接口 |
| `CrmCustomerAnalyzeRespDTO.java` | 客户分析统计 DTO |
| `CrmBusinessAnalyzeRespDTO.java` | 商机分析统计 DTO |
| `CrmContractAnalyzeRespDTO.java` | 合同分析统计 DTO |
| `CrmSalesFunnelRespDTO.java` | 销售漏斗统计 DTO |
| `CrmSalesPerformanceRespDTO.java` | 销售业绩统计 DTO |
| `CrmReportApiImpl.java` | 报表 API 实现类 |
| `CrmCustomerMapper.java` | 新增统计方法 |
| `CrmBusinessMapper.java` | 新增统计方法 |
| `CrmContractMapper.java` | 新增统计方法 |
| `CrmReceivableMapper.java` | 新增统计方法 |
| `CrmReceivableService.java` | 新增统计方法 |

---

## 二、涉及页面

### CRM 报表模块

| 页面 | 路径 | 说明 |
|------|------|------|
| 报表概览 | `/crm/report/dashboard` | 数据概览页面 |
| 客户分析 | `/crm/report/customer` | 客户统计分析 |
| 商机分析 | `/crm/report/business` | 商机统计分析 |
| 合同分析 | `/crm/report/contract` | 合同统计分析 |
| 销售漏斗 | `/crm/report/funnel` | 销售漏斗图 |
| 销售业绩 | `/crm/report/performance` | 销售业绩排行 |

---

## 三、API 接口

### CRM 营销报表 API

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /rpc-api/crm/report/get-customer-analyze | 获取客户分析统计 |
| GET | /rpc-api/crm/report/get-business-analyze | 获取商机分析统计 |
| GET | /rpc-api/crm/report/get-contract-analyze | 获取合同分析统计 |
| GET | /rpc-api/crm/report/get-sales-funnel | 获取销售漏斗统计 |
| GET | /rpc-api/crm/report/get-sales-performance | 获取销售业绩统计 |

### 请求参数

| 参数 | 类型 | 必填 | 说明 |
|------|------|------|------|
| startTime | LocalDateTime | 否 | 开始时间 |
| endTime | LocalDateTime | 否 | 结束时间 |

### 响应示例

**客户分析：**

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

**商机分析：**

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

**合同分析：**

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

**销售漏斗：**

```json
{
  "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 }
    ]
  }
}
```

**销售业绩：**

```json
{
  "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`

```html
<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`

```html
<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`

```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

---

## 七、后续计划

| Phase | 内容 | 状态 |
|-------|------|------|
| Phase 1 | 客户数据统一 - ERP 使用 CRM 客户 | **已完成** |
| Phase 2 | 产品数据统一 - CRM/ERP 使用 MDM 物料 | **已完成** |
| Phase 3 | 合同生成销售订单 | **已完成** |
| Phase 4 | 销售全流程追溯 | **已完成** |
| Phase 5 | 营销数据报表 | **已完成** |
| Phase 6 | 数据迁移与清理 | 待开始 |