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

<template>
  <div class="content">
    <div class="import" @click="knowledgeFlag = !knowledgeFlag">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div v-html="knowledge" v-if="knowledgeFlag"></div>
    <div v-if="!knowledgeFlag">
      <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" @click="downloadData">下载数据</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" @click="step1Submit">提交</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" @click="step2Submit">提交</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 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、F、M值进行评分
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step4Data"
            style="width: 980px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column
              label="用户ID"
              align="center"
              prop="data1"
              width="70"
            >
            </el-table-column>
            <el-table-column label="用户名称" align="center" prop="data2">
            </el-table-column>
            <el-table-column
              label="最近一次消费时间间隔（R）"
              align="center"
              prop="data3"
              width="150"
            >
            </el-table-column>
            <el-table-column label="消费频率（F）" align="center" prop="data4">
            </el-table-column>
            <el-table-column label="消费金额（M）" align="center" prop="data5">
            </el-table-column>
            <el-table-column label="R值打分" align="center" prop="data4">
              <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" prop="data4">
              <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" prop="data4">
              <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" @click="step4Submit">提交</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、F、M的打分值，分别计算各自的平均数（小数点后保留两位小数）
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step5Data"
            style="width: 680px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="" align="center" prop="title" />
            <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" @click="step5Submit">提交</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、F、M3个值是高于平均值，还是低于平均值。如果一行里的R值打分大于平均值，就在R值高低列里记录为“高”，否则记录为“低”
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step6Data"
            :span-method="tableSpanMethod"
            style="width: 980px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户ID" align="center" prop="data1" />
            <el-table-column label="用户名称" align="center" prop="data2" />
            <el-table-column label="R值打分" align="center" prop="data3">
            </el-table-column>
            <el-table-column label="F值打分" align="center" prop="data4">
            </el-table-column>
            <el-table-column label="M值打分" align="center" prop="data5">
            </el-table-column>
            <el-table-column label="R值高低" align="center" width="130">
              <template #default="scope">
                <!-- <el-input
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                </el-input> -->
                <el-select
                  v-model="scope.row.params1"
                  placeholder="请选择"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                  <el-option :label="'高'" :value="'高'" />
                  <el-option :label="'低'" :value="'低'" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="F值高低" align="center" width="130">
              <template #default="scope">
                <!-- <el-input
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                </el-input> -->
                <el-select
                  v-model="scope.row.params2"
                  placeholder="请选择"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                  <el-option :label="'高'" :value="'高'" />
                  <el-option :label="'低'" :value="'低'" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="M值高低" align="center" width="130">
              <template #default="scope">
                <!-- <el-input
                  v-model="scope.row.params3"
                  placeholder="请输入"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                </el-input> -->
                <el-select
                  v-model="scope.row.params3"
                  placeholder="请选择"
                  style="width: 100px"
                  v-if="scope.$index != 3"
                >
                  <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>第七步，用户分类</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          按照用户分类表格里定义的规则进行比较，就可以得出用户属于哪种类。
        </span>
        <div style="text-align: center; width: 800px">
          <p>用户分类规则</p>
          <el-table
            :data="rulesTable"
            style="width: 800px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户分类" align="center" prop="data1" />
            <el-table-column
              label="最近一次消费时间间隔（R）"
              align="center"
              prop="data2"
              width="220"
            />
            <el-table-column
              label="消费频率（F）"
              align="center"
              prop="data3"
            />
            <el-table-column
              label="消费金额（M）"
              align="center"
              prop="data4"
            />
          </el-table>
        </div>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step6Data"
            style="width: 980px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户ID" align="center" prop="data1" />
            <el-table-column label="用户名称" align="center" prop="data2" />
            <el-table-column label="R值打分" align="center" prop="data3">
            </el-table-column>
            <el-table-column label="F值打分" align="center" prop="data4">
            </el-table-column>
            <el-table-column label="M值打分" align="center" prop="data5">
            </el-table-column>
            <el-table-column label="R值高低" align="center" width="130">
              <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" width="130">
              <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" width="130">
              <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>第八步，精细化运营</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          对用户分类以后要做什么呢？那就是针对每类用户如何制定运营策略，这个具体公司业务不同，方法也不一样。这里举例说明前4类用户。
        </span>
        <div class="customerType">
          <img src="@/assets/images/icon001.png" alt="" />
          <span>重要价值用户，RFM三个值都很高，要提供VIP服务</span>
        </div>
        <div class="customerType">
          <img src="@/assets/images/icon002.png" alt="" />
          <span
            >重要发展用户，消费频率低，但是其他两个值很高，就要想办法提高他的消费频率。</span
          >
        </div>
        <div class="customerType">
          <img src="@/assets/images/icon003.png" alt="" />
          <span
            >重要保持用户，最近消费距离现在时间较远，也就是F值低，但是消费频次和消费金额高。这种用户，是一段时间没来的忠实客户。应该主动和他保持联系，提高复购率。</span
          >
        </div>
        <div class="customerType">
          <img src="@/assets/images/icon004.png" alt="" />
          <span
            >重要挽留客户，最近消费时间距离现在较远、消费频率低，但消费金额高。这种用户，即将流失，要主动联系用户，调查清楚哪里出了问题，并想办法挽回。</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const errorNum = ref(0);
const knowledgeFlag = ref(false);
const knowledge = ref(
  '<p style="text-align: start;"><strong>1.什么是RFM分析方法？</strong></p><p style="text-align: start;"><img src="https://pic1.zhimg.com/80/v2-706d62e4bc20f677b4dca950b09d05e8_720w.webp" alt="" data-href="" style="width: 690px;height: auto;"></p><p style="text-align: start;">RFM是3个指标的缩写，最近一次消费时间间隔（Recency），消费频率（Frequency），消费金额（Monetary）。通过这3个指标对用户分类。</p><p style="text-align: start;">这里举个例子来说明这3个指标是什么意思。</p><p style="text-align: start;">比如我有一家店铺，小明是这家店铺的用户。现在是这个月的30号。</p><p style="text-align: start;">1）最近1次消费时间间隔（R）是指用户最近一次消费距离现在多长时间了。</p><p style="text-align: start;">小明最近1次在这就店铺买东西是这个月25号，上一次消费距离现在过去了5天，所以小明的最近1次消费时间间隔是5天。</p><p style="text-align: start;">2）消费频率（F）是指用户一段时间内消费了多少次。</p><p style="text-align: start;">比如“一段时间”定义是最近30天，发现小明最近30天在店铺消费了3次。</p><p style="text-align: start;">3）消费金额（M）是指用户一段时间内的消费金额。</p><p style="text-align: start;">比如“一段时间”是最近30天，发现小明最近30天总共在店铺消费了1000元。</p><p style="text-align: start;">这3个指标业务不同，定义也不同，要根据业务来灵活定义。</p><p style="text-align: start;">最近一次消费时间间隔（R），上一次消费离得越近，也就是R的值越小，用户价值越高。</p><p style="text-align: start;">消费频率（F），购买频率越高，也就是F的值越大，用户价值越高。</p><p style="text-align: start;">消费金额（M），消费金额越高，也就是M的值越大，用户价值越高。</p><p style="text-align: start;">我们把这3个指标按价值从低到高排序，并把这3个指标作为XYZ坐标轴，就可以把空间分为8部分，这样就可以把用户分为下图的8类。</p><p style="text-align: start;"><img src="https://pic4.zhimg.com/80/v2-81a7b7fcf8e7eac1fec021df9b588ba7_720w.webp" alt="" data-href="" style="width: 690px;height: auto;"></p><p style="text-align: start;"><br></p><p style="text-align: start;">我们把这个图里对应的RFM这3个值对应的价值是高还是低，对应到下面这张表里就得到了用户分类的规则。</p><p style="text-align: start;"><img src="https://pic2.zhimg.com/80/v2-56b745a6b404767a24a07b0d9ba7f469_720w.webp" alt="" data-href="" style="width: 690px;height: auto;"></p><p style="text-align: start;"><br></p><p style="text-align: start;"><strong>2.RFM分析方法有什么用？</strong></p><p style="text-align: start;">小明的店铺某个月收入大幅下跌。他赶快分析数据，发行原来几个重要的用户被竞争对手挖走了，而这几个用户贡献了店铺80%的收入。</p><p style="text-align: start;">出现这个问题，是因为小明没有对用户分类，对全部用户采取的都是一样的运营决策。怎么对用户分类，识别出有价值的用户呢？</p><p style="text-align: start;">这时候就可以用RFM分析方法把用户分为8类，这样就可以对不同价值用户使用不同的营销决策，把公司有限的资源发挥最大的效果，这就是我们常常听到的精细化运营。比如第1类是重要价值用户，这类用户最近一次消费较近，消费频率也搞，消费金额也搞，要提供vip服务。</p><p style="text-align: start;"><img src="https://pic1.zhimg.com/80/v2-1388ee45f2b119b250a63b8b90ee1d4c_720w.webp" alt="" data-href="" style="width: 690px;height: auto;"></p><p style="text-align: start;">我们日常生活中接触到的会员服务就是这方面的经典案例。根据企鹅智库《2017中国会员经济数据报告》数据显示，用户对信用卡、酒店、航空公司的会员体系最满意。</p><p s
);
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元以上",
  },
]);
const step4Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "4",
    data4: "2",
    data5: "5000",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "2",
    data4: "3",
    data5: "1000",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "1",
    data4: "1",
    data5: "500",
  },
]);
const step5Data = ref([
  {
    title: "平均值",
  },
]);
const step6Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "4",
    data4: "2",
    data5: "4",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "5",
    data4: "2",
    data5: "2",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "5",
    data4: "1",
    data5: "1",
  },
  {
    data1: "平均值",
    data2: "",
    data3: "5",
    data4: "1",
    data5: "1",
  },
]);
const rulesTable = ref([
  {
    data1: "1.重要价值用户",
    data2: "高",
    data3: "高",
    data4: "高",
  },
  {
    data1: "2.重要发展用户",
    data2: "高",
    data3: "低",
    data4: "高",
  },
  {
    data1: "3.重要保持用户",
    data2: "低",
    data3: "高",
    data4: "高",
  },
  {
    data1: "4.重要挽留用户",
    data2: "低",
    data3: "低",
    data4: "高",
  },
  {
    data1: "5.一般价值用户",
    data2: "高",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般发展用户",
    data2: "高",
    data3: "低",
    data4: "低",
  },
  {
    data1: "7.一般保持用户",
    data2: "低",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般挽留用户",
    data2: "低",
    data3: "低",
    data4: "低",
  },
]);
const downloadData = () => {
  portraitModel
    .downloadDataByRFM({})
    .then((res) => {
      // console.log(res,'--');
      const blob = new Blob([res], { type: "application/vnd.ms-excel" });
      downBlobFile(`案例数据-RFM分析`, blob);
    })
    .catch((error) => {});
};
const step1Submit = () => {
  errorNum.value = 0;
  for (let i in fileTable1.value) {
    // console.log(fileTable1.value[i]);
    if (!fileTable1.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
    if (i == 0) {
      if (fileTable1.value[0].params && fileTable1.value[0].params == "纳入") {
        errorNum.value++;
      }
      // console.log(fileTable1.value[0].params);
    } else {
      if (fileTable1.value[i].params && fileTable1.value[i].params == "剔除") {
        errorNum.value++;
      }
    }
  }
  proxy.$modal.msgSuccess("提交成功");
  console.log(errorNum.value, "错误次数");
};
const step2Submit = () => {
  for (let i in step2Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step2Data.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  let stepError = 0;
  console.log(555);
  if (step2Data.value[0].params1 && step2Data.value[0].params1 !== "4") {
    stepError++;
  }
  if (step2Data.value[0].params2 && step2Data.value[0].params2 !== "2") {
    stepError++;
  }
  if (step2Data.value[0].params3 && step2Data.value[0].params3 !== "5000") {
    stepError++;
  }
  if (step2Data.value[1].params1 && step2Data.value[1].params1 !== "2") {
    stepError++;
  }
  if (step2Data.value[1].params2 && step2Data.value[1].params2 !== "3") {
    stepError++;
  }
  if (step2Data.value[1].params3 && step2Data.value[1].params3 !== "1000") {
    stepError++;
  }
  if (step2Data.value[2].params1 && step2Data.value[2].params1 !== "1") {
    stepError++;
  }
  if (step2Data.value[2].params2 && step2Data.value[2].params2 !== "1") {
    stepError++;
  }
  if (step2Data.value[2].params3 && step2Data.value[2].params3 !== "500") {
    stepError++;
  }
  console.log(stepError, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  //将所填值同步到第四步表格
  step4Data.value[0].data3 = step2Data.value[0].params1;
  step4Data.value[0].data4 = step2Data.value[0].params2;
  step4Data.value[0].data5 = step2Data.value[0].params3;
  step4Data.value[1].data3 = step2Data.value[1].params1;
  step4Data.value[1].data4 = step2Data.value[1].params2;
  step4Data.value[1].data5 = step2Data.value[1].params3;
  step4Data.value[2].data3 = step2Data.value[2].params1;
  step4Data.value[2].data4 = step2Data.value[2].params2;
  step4Data.value[2].data5 = step2Data.value[2].params3;
};
const step4Submit = () => {
  // console.log(6454546);
  for (let i in step4Data.value) {
    if (!step4Data.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  let step4Error = 0;
  if (step4Data.value[0].params1 && step4Data.value[0].params1 !== "4") {
    step4Error++;
  }
  if (step4Data.value[0].params2 && step4Data.value[0].params2 !== "2") {
    step4Error++;
  }
  if (step4Data.value[0].params3 && step4Data.value[0].params3 !== "4") {
    step4Error++;
  }
  if (step4Data.value[1].params1 && step4Data.value[1].params1 !== "5") {
    step4Error++;
  }
  if (step4Data.value[1].params2 && step4Data.value[1].params2 !== "2") {
    step4Error++;
  }
  if (step4Data.value[1].params3 && step4Data.value[1].params3 !== "2") {
    step4Error++;
  }
  if (step4Data.value[2].params1 && step4Data.value[2].params1 !== "5") {
    step4Error++;
  }
  if (step4Data.value[2].params2 && step4Data.value[2].params2 !== "1") {
    step4Error++;
  }
  if (step4Data.value[2].params3 && step4Data.value[2].params3 !== "1") {
    step4Error++;
  }
  console.log(step4Error, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  //将所填值同步到第六步表格
  step6Data.value[0].data3 = step4Data.value[0].params1;
  step6Data.value[0].data4 = step4Data.value[0].params2;
  step6Data.value[0].data5 = step4Data.value[0].params3;
  step6Data.value[1].data3 = step4Data.value[1].params1;
  step6Data.value[1].data4 = step4Data.value[1].params2;
  step6Data.value[1].data5 = step4Data.value[1].params3;
  step6Data.value[2].data3 = step4Data.value[2].params1;
  step6Data.value[2].data4 = step4Data.value[2].params2;
  step6Data.value[2].data5 = step4Data.value[2].params3;
};
const step5Submit = () => {
  // console.log(6333);
  for (let i in step5Data.value) {
    if (!step5Data.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  let step5Error = 0;
  if (step5Data.value[0].params1 && step5Data.value[0].params1 !== "4.67") {
    step5Error++;
  }
  if (step5Data.value[0].params2 && step5Data.value[0].params2 !== "1.67") {
    step5Error++;
  }
  if (step5Data.value[0].params3 && step5Data.value[0].params3 !== "2.33") {
    step5Error++;
  }
  console.log(step5Error, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  //将所填值同步到第六步表格
  step6Data.value[3].data3 = step5Data.value[0].params1;
  step6Data.value[3].data4 = step5Data.value[0].params2;
  step6Data.value[3].data5 = step5Data.value[0].params3;
};
const submitData = () => {
  console.log(666999555);
};
defineExpose({
  submitData,
  // practicalTraining,
});
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 3) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
};
</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");
    }
    .customerType {
      padding-left: 10px;
      display: flex;
      align-items: center;
      width: 945px;
      height: 26px;
      background: #003b75;
      border-radius: 10px;
      border: 1px solid #0052a3;
      font-size: 12px;
      margin-top: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
  .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>