dianshang-qianduan/src/views/portraitModel/components/rfmAnalysis.vue

<template>
  <div class="content">
    <div class="import">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div class="caseBack">
      <div class="title">
        <img src="@/assets/images/caseIcon.png" alt="" />
        <span>案例背景：</span>
      </div>
      <span style="line-height: 25px; font-size: 14px">
        现有以下原始数据，需要采用RFM分析方法，对客户进行分类：
      </span>
      <div style="margin-top: 10px; display: flex">
        <el-table
          :data="fileTable1"
          style="width: 650px"
          border
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId">
          </el-table-column>
          <el-table-column label="用户名称" align="center" prop="userName">
          </el-table-column>
          <el-table-column label="消费时间" align="center" prop="time">
          </el-table-column>
          <el-table-column label="消费金额" align="center" prop="amount">
          </el-table-column>
        </el-table>
        <div class="download">下载数据</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="caseBack">
      <div class="title">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>第一步，确定“近一段时间”的时间间隔</span>
      </div>
      <span style="line-height: 25px; font-size: 14px">
        计划分析最近30天的用户，假设现在是2025.05.30，需要对数据进行筛选，筛选出统计样本
      </span>
      <div style="margin-top: 10px; display: flex">
        <el-table
          :data="fileTable1"
          style="width: 650px"
          border
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId">
          </el-table-column>
          <el-table-column label="用户名称" align="center" prop="userName">
          </el-table-column>
          <el-table-column label="消费时间" align="center" prop="time">
          </el-table-column>
          <el-table-column label="消费金额" align="center" prop="amount">
          </el-table-column>
          <el-table-column label="操作" align="center" prop="opr">
            <template #default="scope">
              <el-select
                v-model="scope.row.params"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option :label="'剔除'" :value="'剔除'" />
                <el-option :label="'纳入'" :value="'纳入'" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
        <div class="submit">提交</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="caseBack">
      <div class="title">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>第二步，计算每个用户的RFM值</span>
      </div>
      <span style="line-height: 25px; font-size: 14px">
        以用户为统计对象，计算出每个用户的R、F、M这3个指标
      </span>
      <div style="margin-top: 10px; display: flex">
        <el-table
          :data="step2Data"
          style="width: 650px"
          border
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column label="用户ID" align="center" prop="userId">
          </el-table-column>
          <el-table-column label="用户名称" align="center" prop="userName">
          </el-table-column>
          <el-table-column label="最近一次消费时间间隔（R）" align="center">
            <template #default="scope">
              <el-input
                v-model="scope.row.params1"
                placeholder="请输入"
                style="width: 100px"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="消费频率（F）" align="center">
            <template #default="scope">
              <el-input
                v-model="scope.row.params2"
                placeholder="请输入"
                style="width: 100px"
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="消费金额（M）" align="center">
            <template #default="scope">
              <el-input
                v-model="scope.row.params3"
                placeholder="请输入"
                style="width: 100px"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="submit">提交</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="caseBack">
      <div class="title">
        <img src="@/assets/images/步骤.png" alt="" />
        <span>第三步，制定R、F、M评分规则</span>
      </div>
      <span style="line-height: 25px; font-size: 14px">
        最近一次消费时间间隔（R），上一次消费离得越近，也就是R的值越小，用户价值越高。<br />
        消费频率（F），购买频率越高，也就是F值越大，用户价值越高。<br />
        消费金额（M），消费金额越高，也就是M值越大，用户价值越高。<br />
        具体实际业务中，如何定义打分的范围，要根据具体的业务来灵活定，没有统一的标准。将R、F、M3个指标分别按价值从小到大分为1-5分。如下表所示：
      </span>
      <div style="margin-top: 10px; display: flex">
        <el-table
          :data="step3Data"
          style="width: 650px"
          border
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column label="按价值打分" align="center" prop="data1">
          </el-table-column>
          <el-table-column
            label="最近一次消费时间间隔(R)"
            align="center"
            prop="data2"
          >
          </el-table-column>
          <el-table-column label="消费频率(F)" align="center" prop="data3">
          </el-table-column>
          <el-table-column label="消费金额(M)" align="center" prop="data4">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
const fileTable1 = ref([
  {
    userId: "1",
    userName: "小明",
    time: "2024.04.28",
    amount: "800",
  },
  {
    userId: "2",
    userName: "小红",
    time: "2024.05.03",
    amount: "300",
  },
  {
    userId: "1",
    userName: "小明",
    time: "2024.05.06",
    amount: "3000",
  },
  {
    userId: "1",
    userName: "小明",
    time: "2024.05.26",
    amount: "2000",
  },
  {
    userId: "2",
    userName: "小红",
    time: "2024.05.27",
    amount: "300",
  },
  {
    userId: "2",
    userName: "小红",
    time: "2024.05.28",
    amount: "400",
  },
  {
    userId: "3",
    userName: "小李",
    time: "2024.05.29",
    amount: "500",
  },
]);
const step2Data = ref([
  {
    userId: "1",
    userName: "小明",
  },
  { userId: "2", userName: "小红" },
  { userId: "3", userName: "小李" },
]);
const step3Data = ref([
  {
    data1: "1",
    data2: "20天以上",
    data3: "2次以内",
    data4: "1000元以内",
  },
  {
    data1: "2",
    data2: "10-20天",
    data3: "2-6次",
    data4: "1000-1500元",
  },
  {
    data1: "3",
    data2: "5-10天",
    data3: "6-8次",
    data4: "1500-3000元",
  },

  {
    data1: "4",
    data2: "3-5天",
    data3: "10-20次",
    data4: "3000-5000元",
  },
  {
    data1: "5",
    data2: "3天以内",
    data3: "20次以上",
    data4: "5000元以上",
  },
]);
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  background: rgba(0, 29, 64, 0.5);
  border: 1px solid #0452c6;
  padding: 10px;
  //   opacity: 0.5;

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 180px;
    height: 56px;
    background-image: url("@/assets/images/01.png");
    background-size: 180px 56px;
    text-align: center;
    align-items: center;
    line-height: 56px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 15px;
    }
  }
  .caseBack {
    .title {
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 89px;
      height: 31px;
      background: url("@/assets/images/downloadIcon.png");
    }
    .submit {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 99px;
      height: 31px;
      background: url("@/assets/images/提交任务.png");
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
</style>