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

<template>
  <div class="content">
    <div class="import" @click="openKnowledge">
      <img src="@/assets/images/导入.png" alt="" />
      <span style="color: #fff">任务知识导入</span>
    </div>
    <!-- <div v-html="knowledge" v-if="knowledgeFlag"></div> -->
    <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: 550px"
            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">
                <div style="display: flex; align-items: center">
                  <el-select v-model="scope.row.params" placeholder="请选择" style="width: 100px">
                    <el-option :label="'剔除'" :value="'剔除'" />
                    <el-option :label="'纳入'" :value="'纳入'" />
                  </el-select>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError" style="color: red">X</span>
                    <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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: 720px"
            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" width="210">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError1" style="color: red">X</span>
                    <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="消费频率（F）" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError2" style="color: red">X</span>
                    <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="消费金额（M）" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError3" style="color: red">X</span>
                    <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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" width="210"></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: 1080px"
            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="210"></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">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError1" style="color: red">X</span>
                    <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="F值打分" align="center" prop="data4">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError2" style="color: red">X</span>
                    <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="M值打分" align="center" prop="data4">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError3" style="color: red">X</span>
                    <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError1" style="color: red">X</span>
                    <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="F值打分" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError2" style="color: red">X</span>
                    <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="M值打分" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
                  <div v-if="showAnswerFlag" style="margin-left: 3px">
                    <span v-if="scope.row.isError3" style="color: red">X</span>
                    <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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> -->
                <div style="display: flex; align-items: center; justify-content: center">
                  <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>
                  <div v-if="showAnswerFlag & (scope.$index != 3)" style="margin-left: 3px">
                    <span v-if="scope.row.isError1" style="color: red">X</span>
                    <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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> -->
                <div style="display: flex; align-items: center; justify-content: center">
                  <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>
                  <div v-if="showAnswerFlag & (scope.$index != 3)" style="margin-left: 3px">
                    <span v-if="scope.row.isError2" style="color: red">X</span>
                    <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                  </div>
                </div>
              </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> -->
                <div style="display: flex; align-items: center; justify-content: center">
                  <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>
                  <div v-if="showAnswerFlag & (scope.$index != 3)" style="margin-left: 3px">
                    <span v-if="scope.row.isError3" style="color: red">X</span>
                    <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step6Submit">提交</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="step7Data"
            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="用户分类" align="center" width="200">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center">
                  <el-select v-model="scope.row.params" placeholder="请选择" style="width: 170px">
                    <el-option :label="item.label" :value="item.value" v-for="item in classifyList" :key="item.value" />
                  </el-select>
                  <div v-if="showAnswerFlag & (scope.$index != 3)" style="margin-left: 3px">
                    <span v-if="scope.row.isError1" style="color: red">X</span>
                    <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step7Submit">提交</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>
    <el-dialog v-model="dialogVisible" title="任务知识导入" style="width: 1108px; height: 798px" custom-class="gdialog" @close="handlClose">
      <div style="color: #fff; margin-top: -35px; padding: 10px; padding-left: 20px">
        <el-scrollbar height="650px">
          <div v-html="knowledge"></div>
        </el-scrollbar>
      </div>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">确定</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            返回
          </el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script setup>
import { getUserInfo } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import { onBeforeUnmount, onMounted } from "vue";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const dialogVisible = ref(false);
const { proxy } = getCurrentInstance();
const timer = ref(null);
const timeCount = ref(0);
const errorNum = ref(0); //总错误次数
const stepError1 = ref(0);
const stepError2 = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const step5Error = ref(0);
const step6Error = ref(0);
const step7Error = ref(0);
//判断每一步是否提交
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step4AnswerFlag = ref(false);
const step5AnswerFlag = ref(false);
const step6AnswerFlag = ref(false);
const step7AnswerFlag = ref(false);
const showAnswerFlag = ref(false);
const knowledgeFlag = ref(false);
const knowledge = ref(
  '<p style="text-align: start;"><strong>1.什么是RFM分析方法？</strong></p><p style="text-align: start;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApMAAAEqCAYAAABJO9vdAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7N0HmG5FsS/8e797zz2eYyBnTJhzFlFRguScQRBJKmblGFDMigomjCgoIlHiJknOOWdEQDJITjtH6lu/3lNj79d3dhJ2mq5n6lnvrNW5q6v+Xd2r1/+KRo0aNWrUqFGjRo1mkxqYbNSoUaNGjRo1ajTb1MBko0aNGjVq1KhRo9mmBiYbNWrUqFGjRo0azTY1MNmoUaNGjRo1atRotqmByUaNGjVq1KhRo0azTQ1MNmrUqFGjRo0aNZptamCyUaNGjRo1atSo0WxTA5ONGjVq1KhRo0aNZpsamGzUqFGjRo0aNWo029TAZKNGjRo1atSoUaPZpgYmGzVq1KhRo0aNGs02NTDZqFGjRo0aNWrUaLapgclGjRo1atSoUaNGs00NTDZq1KhRo0aNGjWabWpgslGjRo0aNWrUqNFsUwOTjRo1atSoUaNGjWabGphs1KhRo0aNGjVqNNvUwGSjRo0aNWrUqFGj2aYGJhs1atSoUaNGjRrNNjUw2ahRo0aNGjVq1Gi2qYHJRo0aNWrUqFGjRrNNDUw2atSoUaNGjRo1mm1qYLJRo0aNGjVq1KjRbFMDk40aNWrUqFGjRo1mmxqYbNSoUaNGjRo1ajTb1MBko0aNGjVq1KhRo9mmBiYbNWrUqFGjRo0azTY1MNmoUaNGjRo1atRotqmByUaNGjVq1KhRo0azTQ1MNmrUqFGjRgsAPf300/H0lAH2e4Brqu/XjCZPnlw4/3edMmVK4UmTJpVro0b9qIHJRo0aNWrUaD6mBHujR4+Oe+65J2666ab4xz/+ERMnThwEgIPAcPJUcJicYFL8sWPHFjDp/mOPPRbXXntt3HnnnTFq1KiYMGFCud+oUT9qYLJRo0aNGjWajwkAHDlyZJxzzjnxla98JXbYYYf4yU9+Etdff32MGzeugEBgMTkBY82AJzDq2a233hq/+MUvYpdddokvfelLcfrpp8fjjz9ewjVq1I8amGzUqFGjRo3mUwLwAMBHHnkkfvSjH8XrX//6WHTRReNtb3tbfOtb34obbrghxo8fXzyLGGicPGkqmBRvkLt7Y0aPifvvvz/22muveOc73xnLLLNMvOQlL4nvfe97cddddzUw2WhIamCyUaNGjRo1mk+JpxFIfPjhhwuYfMMb3hDPfe5z4wUveEG8613vin322acsVVvCnjRxqmcyl7oTRLo3ccLEsjR+wAEHxEorrRQLL7xw/Nd//VessMIK8cMf/rAsn+deykaNeqmByUaNGjVq1Gg+JYDQUvYTTzwRp516Wmy//fax3HLLFSC45JJLxtprrx1//OMf4+677y5g0ss5gGQBkwkkJ06Mhx56KI499thYa621YpFFFon//M//LB7ObbbZJk455ZR48oknG5hsNCQ1MNmoUaNGjRrNpwTgjR83vrwkAxAeddRRseGGG8biiy9eAOESSywRG220Ufz5z38uz4UHJIHI9Go++eSTcdJJJ8XWW29dwou30EILxaqrrhqHHnpo8VhOGN9ewGk0NDUw2ahRo0aNGs2nBOCNGTOmgElL2ffdd1/89re/LUvVvJOA4fLLLx/bbrttnHbaaTFu7Ljiicw9lCOfGhmXXHJJ7LTTTvHiF7+4xLFEbs+kl3CKR7MDnTygDUw2GooamGzUqFGjRo3mU6q9jJa7sbex99xzz7J/8r//+78LQPQizWc/+9m48sory5K4l3K8vX3jDTfGV7/61bI3EogU/s1vfnOJLx3pAZJtibvR9KiByUaNGg1rYiRrnhGVcAOHQjdqNLcpwaRryrD/nTXpmKCXvexlBSA+//nPj1e/+tUFUF511VUFUN59193x4x//uLwBzoP5H//xH8WL+bnPfS6uueaa4unkvZRek/dG06MGJhs1ajRsiYFkhGtOg9zPeOb9fBt2emEbNZoTZMnaMrc9jbkUjYFAh447J/JVr3pV8TraB/m6172uvJ3tyKA/HvDHWHHFFcvb33jppZcuZ0teesml8cTjT5Q0pF+OExpIu8l6o37UwGSjRo2GLRVgyPgO8VWQXsrwtdEeKmyjRnOCeA15EC1b+51MRr1Y48DxD33oQ7HUUksVz6Mjf5xB+eUvfzk+8IEPFICZnsv11ltv8IDy3FNpmbt4JydOPVKoyXujftTAZKNGjYYt9QOHftf/93JtrP3fjGujuUnkEOADAB047oWZO+64o/Dtt99elqt/97vfxfve9754znOeE//n//yf4oXM44P8Bih5L301h8fyb3/7W4mbaTzwwAPlQHN5NVlv1I8amGw012lWjPGcVGSZ16yUr9H8Q/o0wWECSG/EPvjgg8V4uubvmhlr+80Y8Fz+SxlpstJobhAg6Wif7373u/GZz3wmdt555/J29sc+9rHYddddy1mRb3zjGwt45J0EKPH//b//t+yVdP8Vr3hF8WB++tOfjo9//OPxkY98pKTziU98ooBML+5YTm/UqB81MNlojlOv4U2uyf+1Nyif1+GTZ5Z6w88ojUGv08DLFjMK32j+IX2YQDLB5KOPPhoXX3xxOeD5Bz/4QXmbtR8zrH/605+KxweoBCgHZaXJR6M5TOTt0ksvjc0226wsYQOIAOP/+3//bxp2L8FjDSiT//f//t+Dv3kwsbA8l8suu2x84QtfKG93N2rUjxqYbDRHKY1tgsReZtQZZ58Gu/HGG4vBpsBGjhzZN3ymlzwU5fOMx6vkAF+fCHMgr3yRa/27eJ58x7baUze9fBrNH6QP9a99YA58fuzRx+Lkk0+OLbbYonz14//7//6/YnhrY5tsfxmjvemmm8ZZZ50VTz31VJGRJheN5gbRSc6P9KUbcgk4puy65m8ynSAzZdm9ZOF4KD2vAad70t1xxx3LCz2pS2tu1KiByUZzlCgeyo8hr78PyzsEuAF59uv8/Oc/jw9/+MOx+eabx7e+9a2yxCJuAXYDoA7XCg0PRZ5lnNyUbgP6dtttV5aBDj744LJUpCyZjjLZ1G7zuXxLmQfybDR/kz7Un2RO/5pQ/PrXvy5HpDCiaXj7MQ+Oq2XBP/zhD2XiQy4aNZobRPZMup0V6cUaL9r4+o0v2bgutthi5fcyyyxTPIzpvUxA6dOJL3zhC8u+SS/hmCyJl3Ff+tKXxhprrFE89mTd2OnlRo0amGw0R4niYcTLN2EnTprKHWhj0AE3Xh6zbCDvTW96UznGYrXVVov99tuv7NcpS5KA3QAnuJuRUhOugNYuPxvKLWO+973vLZvOKWD7jO68885BgCGtBLflLckuXr88G82fpO+yr/Fjjz0Wxx13XGyyySbF8D7vec8ry3uMay8zxMAk48uA33XXXSWtRo3mBtFH9KZzJU85+ZQ48ogj48gjp/IRRxwxyD6nSI/usMMORbbJsG93f/SjHy3PDz/88PIpRvFcM57vdZ9zzjllFYeeTt1Xc6NGDUw2etYpFQ6lBwwChWPHjC1L15SgfWe8ggz6bbfdVrw966+/fvl6w1ve8pbyWa9vfOMb8fe//728IDFq5KjyCbCnnnyqeBmlkSzNXs48sH1x5557btmY/ta3vrXkAVButdVWxfvpixB1ev6nQAEOgKEpzwWDanlMD7Q3VxncL37xi8XAkpFkLyO451vFlv0sAwKVvOfXX399M7KN5hoVOe4muz6TmPqu1n3JdKWJ9Pe///0yKQImfRWHR54uzXiutU7G7jl+yFipJ9NNzhslNTDZ6FknyoYCAsYcrAsQWsr29uHvf//72GeffeJnP/tZ+Q7s9773vfJG4Tve8Y7ilfRZr7e8+S2x2aabxV577VWAJj7ooIPi0EMPLXzYYYcNstl1Pz7kkENKWFcvUWy44Y
);
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: "",
    data4: "",
    data5: "",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "",
    data4: "",
    data5: "",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "",
    data4: "",
    data5: "",
  },
  {
    data1: "平均值",
    data2: "",
    data3: "",
    data4: "",
    data5: "",
  },
]);
const step7Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "",
    data4: "",
    data5: "",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "",
    data4: "",
    data5: "",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "",
    data4: "",
    data5: "",
  },
]);
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 classifyList = ref([
  {
    value: "重要价值用户",
    label: "1.重要价值用户",
  },
  {
    value: "重要发展用户",
    label: "2.重要发展用户",
  },
  {
    value: "重要保持用户",
    label: "3.重要保持用户",
  },
  {
    value: "重要挽留用户",
    label: "4.重要挽留用户",
  },
  {
    value: "一般价值用户",
    label: "5.一般价值用户",
  },
  {
    value: "一般发展用户",
    label: "6.一般发展用户",
  },
  {
    value: "一般保持用户",
    label: "7.一般保持用户",
  },
  {
    value: "一般挽留用户",
    label: "8.一般挽留用户",
  },
]);
onBeforeUnmount(() => {
  saveData();
});
onMounted(() => {
  getData();
});
const downloadData = () => {
  // portraitModel
  //   .downloadDataByRFM({})
  //   .then((res) => {
  //     // console.log(res,'--');
  //     const blob = new Blob([res], {
  //       type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  //     });
  //     downBlobFile(`案例数据-RFM分析`, blob);
  //   })
  //   .catch((error) => {});
  window.open(baseUrl + "/api/downDataByUserPortrait/analysisByRfmDown");
};
const step1Submit = () => {
  // errorNum.value = 0;
  stepError1.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 == "纳入") {
        stepError1.value++;
        fileTable1.value[0].isError = true;
      } else {
        fileTable1.value[0].isError = false;
      }
      // console.log(fileTable1.value[0].params);
    } else {
      if (fileTable1.value[i].params && fileTable1.value[i].params == "剔除") {
        stepError1.value++;
        fileTable1.value[i].isError = true;
      } else {
        fileTable1.value[i].isError = false;
      }
    }
  }
  console.log(fileTable1.value, "000");
  proxy.$modal.msgSuccess("提交成功");
  console.log(stepError1.value, "错误次数");
  step1AnswerFlag.value = true;
};
const step2Submit = () => {
  stepError2.value = 0;
  for (let i in step2Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step2Data.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  // let stepError2 = 0;
  console.log(555);
  if (step2Data.value[0].params1 && step2Data.value[0].params1 !== "4") {
    stepError2.value++;
    step2Data.value[0].isError1 = true;
  } else {
    step2Data.value[0].isError1 = false;
  }
  if (step2Data.value[0].params2 && step2Data.value[0].params2 !== "2") {
    stepError2.value++;
    step2Data.value[0].isError2 = true;
  } else {
    step2Data.value[0].isError2 = false;
  }
  if (step2Data.value[0].params3 && step2Data.value[0].params3 !== "5000") {
    stepError2.value++;
    step2Data.value[0].isError3 = true;
  } else {
    step2Data.value[0].isError3 = false;
  }
  if (step2Data.value[1].params1 && step2Data.value[1].params1 !== "2") {
    stepError2.value++;
    step2Data.value[1].isError1 = true;
  } else {
    step2Data.value[1].isError1 = false;
  }
  if (step2Data.value[1].params2 && step2Data.value[1].params2 !== "3") {
    stepError2.value++;
    step2Data.value[1].isError2 = true;
  } else {
    step2Data.value[1].isError2 = false;
  }
  if (step2Data.value[1].params3 && step2Data.value[1].params3 !== "1000") {
    stepError2.value++;
    step2Data.value[1].isError3 = true;
  } else {
    step2Data.value[1].isError3 = false;
  }
  if (step2Data.value[2].params1 && step2Data.value[2].params1 !== "1") {
    stepError2.value++;
    step2Data.value[2].isError1 = true;
  } else {
    step2Data.value[2].isError1 = false;
  }
  if (step2Data.value[2].params2 && step2Data.value[2].params2 !== "1") {
    stepError2.value++;
    step2Data.value[2].isError2 = true;
  } else {
    step2Data.value[2].isError2 = false;
  }
  if (step2Data.value[2].params3 && step2Data.value[2].params3 !== "500") {
    stepError2.value++;
    step2Data.value[2].isError3 = true;
  } else {
    step2Data.value[2].isError3 = false;
  }
  console.log(stepError2.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step2AnswerFlag.value = true;
  //将所填值同步到第四步表格
  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);
  step4Error.value = 0;
  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.value++;
    step4Data.value[0].isError1 = true;
  } else {
    step4Data.value[0].isError1 = false;
  }
  if (step4Data.value[0].params2 && step4Data.value[0].params2 !== "2") {
    step4Error.value++;
    step4Data.value[0].isError2 = true;
  } else {
    step4Data.value[0].isError2 = false;
  }
  if (step4Data.value[0].params3 && step4Data.value[0].params3 !== "4") {
    step4Error.value++;
    step4Data.value[0].isError3 = true;
  } else {
    step4Data.value[0].isError3 = false;
  }
  if (step4Data.value[1].params1 && step4Data.value[1].params1 !== "5") {
    step4Error.value++;
    step4Data.value[1].isError1 = true;
  } else {
    step4Data.value[1].isError1 = false;
  }
  if (step4Data.value[1].params2 && step4Data.value[1].params2 !== "2") {
    step4Error.value++;
    step4Data.value[1].isError2 = true;
  } else {
    step4Data.value[1].isError2 = false;
  }
  if (step4Data.value[1].params3 && step4Data.value[1].params3 !== "2") {
    step4Error.value++;
    step4Data.value[1].isError3 = true;
  } else {
    step4Data.value[1].isError3 = false;
  }
  if (step4Data.value[2].params1 && step4Data.value[2].params1 !== "5") {
    step4Error.value++;
    step4Data.value[2].isError1 = true;
  } else {
    step4Data.value[2].isError1 = false;
  }
  if (step4Data.value[2].params2 && step4Data.value[2].params2 !== "1") {
    step4Error.value++;
    step4Data.value[2].isError2 = true;
  } else {
    step4Data.value[2].isError2 = false;
  }
  if (step4Data.value[2].params3 && step4Data.value[2].params3 !== "1") {
    step4Error.value++;
    step4Data.value[2].isError3 = true;
  } else {
    step4Data.value[2].isError3 = false;
  }
  console.log(step4Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
  //将所填值同步到第六步表格
  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);
  step5Error.value = 0;
  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.value++;
    step5Data.value[0].isError1 = true;
  } else {
    step5Data.value[0].isError1 = false;
  }
  if (step5Data.value[0].params2 && step5Data.value[0].params2 !== "1.67") {
    step5Error.value++;
    step5Data.value[0].isError2 = true;
  } else {
    step5Data.value[0].isError2 = false;
  }
  if (step5Data.value[0].params3 && step5Data.value[0].params3 !== "2.33") {
    step5Error.value++;
    step5Data.value[0].isError3 = true;
  } else {
    step5Data.value[0].isError3 = false;
  }
  console.log(step5Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step5AnswerFlag.value = true;
  //将所填值同步到第六步表格
  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 step6Submit = () => {
  // console.log(555);
  step6Error.value = 0;
  for (let i in step6Data.value.slice(0, step6Data.value.length - 1)) {
    if (!step6Data.value[i].params1 || !step6Data.value[i].params2 || !step6Data.value[i].params3) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  // let step6Error = 0;
  if (step6Data.value[0].params1 && step6Data.value[0].params1 !== "低") {
    step6Error.value++;
    step6Data.value[0].isError1 = true;
  } else {
    step6Data.value[0].isError1 = false;
  }
  if (step6Data.value[0].params2 && step6Data.value[0].params2 !== "高") {
    step6Error.value++;
    step6Data.value[0].isError2 = true;
  } else {
    step6Data.value[0].isError2 = false;
  }
  if (step6Data.value[0].params3 && step6Data.value[0].params3 !== "高") {
    step6Error.value++;
    step6Data.value[0].isError3 = true;
  } else {
    step6Data.value[0].isError3 = false;
  }
  if (step6Data.value[1].params1 && step6Data.value[1].params1 !== "高") {
    step6Error.value++;
    step6Data.value[1].isError1 = true;
  } else {
    step6Data.value[1].isError1 = false;
  }
  if (step6Data.value[1].params2 && step6Data.value[1].params2 !== "高") {
    step6Error.value++;
    step6Data.value[1].isError2 = true;
  } else {
    step6Data.value[1].isError2 = false;
  }
  if (step6Data.value[1].params3 && step6Data.value[1].params3 !== "高") {
    step6Error.value++;
    step6Data.value[1].isError3 = true;
  } else {
    step6Data.value[1].isError3 = false;
  }
  if (step6Data.value[2].params1 && step6Data.value[2].params1 !== "高") {
    step6Error.value++;
    step6Data.value[2].isError1 = true;
  } else {
    step6Data.value[2].isError1 = false;
  }
  if (step6Data.value[2].params2 && step6Data.value[2].params2 !== "低") {
    step6Error.value++;
    step6Data.value[2].isError2 = true;
  } else {
    step6Data.value[2].isError2 = false;
  }
  if (step6Data.value[2].params3 && step6Data.value[2].params3 !== "低") {
    step6Error.value++;
    step6Data.value[2].isError3 = true;
  } else {
    step6Data.value[2].isError3 = false;
  }
  console.log(step6Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step6AnswerFlag.value = true;
  //将所填值同步到第六步表格
  step7Data.value[0].data3 = step6Data.value[0].params1;
  step7Data.value[0].data4 = step6Data.value[0].params2;
  step7Data.value[0].data5 = step6Data.value[0].params3;
  step7Data.value[1].data3 = step6Data.value[1].params1;
  step7Data.value[1].data4 = step6Data.value[1].params2;
  step7Data.value[1].data5 = step6Data.value[1].params3;
  step7Data.value[2].data3 = step6Data.value[2].params1;
  step7Data.value[2].data4 = step6Data.value[2].params2;
  step7Data.value[2].data5 = step6Data.value[2].params3;
};
const step7Submit = () => {
  // console.log(111);
  step7Error.value = 0;
  for (let i in step7Data.value) {
    if (!step7Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  // let step7Error = 0;
  if (step7Data.value[0].params && step7Data.value[0].params !== "重要保持用户") {
    step7Error.value++;
    step7Data.value[0].isError1 = true;
  } else {
    step7Data.value[0].isError1 = false;
  }
  if (step7Data.value[1].params && step7Data.value[1].params !== "重要价值用户") {
    step7Error.value++;
    step7Data.value[1].isError1 = true;
  } else {
    step7Data.value[1].isError1 = false;
  }
  if (step7Data.value[2].params && step7Data.value[2].params !== "一般发展用户") {
    step7Error.value++;
    step7Data.value[2].isError1 = true;
  } else {
    step7Data.value[2].isError1 = false;
  }
  console.log(step7Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step7AnswerFlag.value = true;
};
const submitData = () => {
  if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step4AnswerFlag.value || !step5AnswerFlag.value || !step6AnswerFlag.value || !step7AnswerFlag.value) {
    proxy.$modal.msgError("请先完成所有步骤！");
    return;
  }
  errorNum.value = stepError1.value + stepError2.value + step4Error.value + step5Error.value + step6Error.value + step7Error.value;
  console.log(errorNum.value, "总错误次数");
  if (errorNum.value > 5) {
    errorNum.value = 5;
  }
  portraitModel
    .submit({
      userId: JSON.parse(getUserInfo()).userId,
      taskName: "RFM分析",
      numberOfErrors: errorNum.value,
      subState: 1,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
      showAnswerFlag.value = true;
      saveDataSubmit();
    })
    .catch((error) => {});
};
const saveData = () => {
  const params = {
    stepFiveA: fileTable1.value[0].params,
    stepFiveB: fileTable1.value[1].params,
    stepFiveC: fileTable1.value[2].params,
    stepFiveD: fileTable1.value[3].params,
    stepSixA: fileTable1.value[4].params,
    stepSixB: fileTable1.value[5].params,
    stepSixC: fileTable1.value[6].params,
    stepSixD: step2Data.value[0].params1,
    stepSevenA: step2Data.value[0].params2,
    stepSevenB: step2Data.value[0].params3,
    stepSevenC: step2Data.value[1].params1,
    stepSevenD: step2Data.value[1].params2,
    stepEightA: step2Data.value[1].params3,
    stepEightB: step2Data.value[2].params1,
    stepEightC: step2Data.value[2].params2,
    stepEightD: step2Data.value[2].params3,
    stepNineA: step4Data.value[0].params1,
    stepNineB: step4Data.value[0].params2,
    stepNineC: step4Data.value[0].params3,
    stepNineD: step4Data.value[1].params1,
    stepTenA: step4Data.value[1].params2,
    stepTenB: step4Data.value[1].params3,
    stepTenC: step4Data.value[2].params1,
    stepTenD: step4Data.value[2].params2,
    stepElevenA: step4Data.value[2].params3,
    stepOneA: step5Data.value[0].params1,
    stepOneB: step5Data.value[0].params2,
    stepOneC: step5Data.value[0].params3,
    stepOneD: step6Data.value[0].params1,
    stepTwoA: step6Data.value[0].params2,
    stepTwoB: step6Data.value[0].params3,
    stepTwoC: step6Data.value[1].params1,
    stepThreeA: step6Data.value[1].params2,
    stepThreeB: step6Data.value[1].params3,
    stepThreeC: step6Data.value[2].params1,
    stepThreeD: step6Data.value[2].params2,
    stepFourA: step6Data.value[2].params3,
    stepFourB: step7Data.value[0].params,
    stepFourC: step7Data.value[1].params,
    stepFourD: step7Data.value[2].params,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "RFM分析",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};
const saveDataSubmit = () => {
  const params = {
    stepFiveA: fileTable1.value[0].params,
    stepFiveB: fileTable1.value[1].params,
    stepFiveC: fileTable1.value[2].params,
    stepFiveD: fileTable1.value[3].params,
    stepSixA: fileTable1.value[4].params,
    stepSixB: fileTable1.value[5].params,
    stepSixC: fileTable1.value[6].params,
    stepSixD: step2Data.value[0].params1,
    stepSevenA: step2Data.value[0].params2,
    stepSevenB: step2Data.value[0].params3,
    stepSevenC: step2Data.value[1].params1,
    stepSevenD: step2Data.value[1].params2,
    stepEightA: step2Data.value[1].params3,
    stepEightB: step2Data.value[2].params1,
    stepEightC: step2Data.value[2].params2,
    stepEightD: step2Data.value[2].params3,
    stepNineA: step4Data.value[0].params1,
    stepNineB: step4Data.value[0].params2,
    stepNineC: step4Data.value[0].params3,
    stepNineD: step4Data.value[1].params1,
    stepTenA: step4Data.value[1].params2,
    stepTenB: step4Data.value[1].params3,
    stepTenC: step4Data.value[2].params1,
    stepTenD: step4Data.value[2].params2,
    stepElevenA: step4Data.value[2].params3,
    stepOneA: step5Data.value[0].params1,
    stepOneB: step5Data.value[0].params2,
    stepOneC: step5Data.value[0].params3,
    stepOneD: step6Data.value[0].params1,
    stepTwoA: step6Data.value[0].params2,
    stepTwoB: step6Data.value[0].params3,
    stepTwoC: step6Data.value[1].params1,
    stepThreeA: step6Data.value[1].params2,
    stepThreeB: step6Data.value[1].params3,
    stepThreeC: step6Data.value[2].params1,
    stepThreeD: step6Data.value[2].params2,
    stepFourA: step6Data.value[2].params3,
    stepFourB: step7Data.value[0].params,
    stepFourC: step7Data.value[1].params,
    stepFourD: step7Data.value[2].params,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "RFM分析",
      ...params,
      subState: 1,
    })
    .then((res) => {})
    .catch((error) => {});
};
const getData = () => {
  portraitModel
    .getData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "RFM分析",
    })
    .then((res) => {
      fileTable1.value[0].params = res.data.stepFiveA;
      fileTable1.value[1].params = res.data.stepFiveB;
      fileTable1.value[2].params = res.data.stepFiveC;
      fileTable1.value[3].params = res.data.stepFiveD;
      fileTable1.value[4].params = res.data.stepSixA;
      fileTable1.value[5].params = res.data.stepSixB;
      fileTable1.value[6].params = res.data.stepSixC;
      step2Data.value[0].params1 = res.data.stepSixD;
      step2Data.value[0].params2 = res.data.stepSevenA;
      step2Data.value[0].params3 = res.data.stepSevenB;
      step2Data.value[1].params1 = res.data.stepSevenC;
      step2Data.value[1].params2 = res.data.stepSevenD;
      step2Data.value[1].params3 = res.data.stepEightA;
      step2Data.value[2].params1 = res.data.stepEightB;
      step2Data.value[2].params2 = res.data.stepEightC;
      step2Data.value[2].params3 = res.data.stepEightD;
      step4Data.value[0].params1 = res.data.stepNineA;
      step4Data.value[0].params2 = res.data.stepNineB;
      step4Data.value[0].params3 = res.data.stepNineC;
      step4Data.value[1].params1 = res.data.stepNineD;
      step4Data.value[1].params2 = res.data.stepTenA;
      step4Data.value[1].params3 = res.data.stepTenB;
      step4Data.value[2].params1 = res.data.stepTenC;
      step4Data.value[2].params2 = res.data.stepTenD;
      step4Data.value[2].params3 = res.data.stepElevenA;
      step5Data.value[0].params1 = res.data.stepOneA;
      step5Data.value[0].params2 = res.data.stepOneB;
      step5Data.value[0].params3 = res.data.stepOneC;
      step6Data.value[0].params1 = res.data.stepOneD;
      step6Data.value[0].params2 = res.data.stepTwoA;
      step6Data.value[0].params3 = res.data.stepTwoB;
      step6Data.value[1].params1 = res.data.stepTwoC;
      step6Data.value[1].params2 = res.data.stepThreeA;
      step6Data.value[1].params3 = res.data.stepThreeB;
      step6Data.value[2].params1 = res.data.stepThreeC;
      step6Data.value[2].params2 = res.data.stepThreeD;
      step6Data.value[2].params3 = res.data.stepFourA;
      step7Data.value[0].params = res.data.stepFourB;
      step7Data.value[1].params = res.data.stepFourC;
      step7Data.value[2].params = res.data.stepFourD;

      //将所填值同步到第七步表格
      step7Data.value[0].data3 = step6Data.value[0].params1;
      step7Data.value[0].data4 = step6Data.value[0].params2;
      step7Data.value[0].data5 = step6Data.value[0].params3;
      step7Data.value[1].data3 = step6Data.value[1].params1;
      step7Data.value[1].data4 = step6Data.value[1].params2;
      step7Data.value[1].data5 = step6Data.value[1].params3;
      step7Data.value[2].data3 = step6Data.value[2].params1;
      step7Data.value[2].data4 = step6Data.value[2].params2;
      step7Data.value[2].data5 = step6Data.value[2].params3;

      //将所填值同步到第六步表格
      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;

      //将所填值同步到第六步表格
      step6Data.value[3].data3 = step5Data.value[0].params1;
      step6Data.value[3].data4 = step5Data.value[0].params2;
      step6Data.value[3].data5 = step5Data.value[0].params3;
      //回显答案
      if (res.data.subState & (res.data.subState == 1)) {
        showAnswerFlag.value = true;
        for (let i in fileTable1.value) {
          if (i == 0) {
            if (fileTable1.value[0].params && fileTable1.value[0].params == "纳入") {
              fileTable1.value[0].isError = true;
            } else {
              fileTable1.value[0].isError = false;
            }
            // console.log(fileTable1.value[0].params);
          } else {
            if (fileTable1.value[i].params && fileTable1.value[i].params == "剔除") {
              fileTable1.value[i].isError = true;
            } else {
              fileTable1.value[i].isError = false;
            }
          }
        }
        if (step2Data.value[0].params1 && step2Data.value[0].params1 !== "4") {
          step2Data.value[0].isError1 = true;
        } else {
          step2Data.value[0].isError1 = false;
        }
        if (step2Data.value[0].params2 && step2Data.value[0].params2 !== "2") {
          step2Data.value[0].isError2 = true;
        } else {
          step2Data.value[0].isError2 = false;
        }
        if (step2Data.value[0].params3 && step2Data.value[0].params3 !== "5000") {
          step2Data.value[0].isError3 = true;
        } else {
          step2Data.value[0].isError3 = false;
        }
        if (step2Data.value[1].params1 && step2Data.value[1].params1 !== "2") {
          step2Data.value[1].isError1 = true;
        } else {
          step2Data.value[1].isError1 = false;
        }
        if (step2Data.value[1].params2 && step2Data.value[1].params2 !== "3") {
          step2Data.value[1].isError2 = true;
        } else {
          step2Data.value[1].isError2 = false;
        }
        if (step2Data.value[1].params3 && step2Data.value[1].params3 !== "1000") {
          step2Data.value[1].isError3 = true;
        } else {
          step2Data.value[1].isError3 = false;
        }
        if (step2Data.value[2].params1 && step2Data.value[2].params1 !== "1") {
          step2Data.value[2].isError1 = true;
        } else {
          step2Data.value[2].isError1 = false;
        }
        if (step2Data.value[2].params2 && step2Data.value[2].params2 !== "1") {
          step2Data.value[2].isError2 = true;
        } else {
          step2Data.value[2].isError2 = false;
        }
        if (step2Data.value[2].params3 && step2Data.value[2].params3 !== "500") {
          step2Data.value[2].isError3 = true;
        } else {
          step2Data.value[2].isError3 = false;
        }

        if (step4Data.value[0].params1 && step4Data.value[0].params1 !== "4") {
          step4Data.value[0].isError1 = true;
        } else {
          step4Data.value[0].isError1 = false;
        }
        if (step4Data.value[0].params2 && step4Data.value[0].params2 !== "2") {
          step4Data.value[0].isError2 = true;
        } else {
          step4Data.value[0].isError2 = false;
        }
        if (step4Data.value[0].params3 && step4Data.value[0].params3 !== "4") {
          step4Data.value[0].isError3 = true;
        } else {
          step4Data.value[0].isError3 = false;
        }
        if (step4Data.value[1].params1 && step4Data.value[1].params1 !== "5") {
          step4Data.value[1].isError1 = true;
        } else {
          step4Data.value[1].isError1 = false;
        }
        if (step4Data.value[1].params2 && step4Data.value[1].params2 !== "2") {
          step4Data.value[1].isError2 = true;
        } else {
          step4Data.value[1].isError2 = false;
        }
        if (step4Data.value[1].params3 && step4Data.value[1].params3 !== "2") {
          step4Data.value[1].isError3 = true;
        } else {
          step4Data.value[1].isError3 = false;
        }
        if (step4Data.value[2].params1 && step4Data.value[2].params1 !== "5") {
          step4Data.value[2].isError1 = true;
        } else {
          step4Data.value[2].isError1 = false;
        }
        if (step4Data.value[2].params2 && step4Data.value[2].params2 !== "1") {
          step4Data.value[2].isError2 = true;
        } else {
          step4Data.value[2].isError2 = false;
        }
        if (step4Data.value[2].params3 && step4Data.value[2].params3 !== "1") {
          step4Data.value[2].isError3 = true;
        } else {
          step4Data.value[2].isError3 = false;
        }

        if (step5Data.value[0].params1 && step5Data.value[0].params1 !== "4.67") {
          step5Data.value[0].isError1 = true;
        } else {
          step5Data.value[0].isError1 = false;
        }
        if (step5Data.value[0].params2 && step5Data.value[0].params2 !== "1.67") {
          step5Data.value[0].isError2 = true;
        } else {
          step5Data.value[0].isError2 = false;
        }
        if (step5Data.value[0].params3 && step5Data.value[0].params3 !== "2.33") {
          step5Data.value[0].isError3 = true;
        } else {
          step5Data.value[0].isError3 = false;
        }

        if (step6Data.value[0].params1 && step6Data.value[0].params1 !== "低") {
          step6Data.value[0].isError1 = true;
        } else {
          step6Data.value[0].isError1 = false;
        }
        if (step6Data.value[0].params2 && step6Data.value[0].params2 !== "高") {
          step6Data.value[0].isError2 = true;
        } else {
          step6Data.value[0].isError2 = false;
        }
        if (step6Data.value[0].params3 && step6Data.value[0].params3 !== "高") {
          step6Data.value[0].isError3 = true;
        } else {
          step6Data.value[0].isError3 = false;
        }
        if (step6Data.value[1].params1 && step6Data.value[1].params1 !== "高") {
          step6Data.value[1].isError1 = true;
        } else {
          step6Data.value[1].isError1 = false;
        }
        if (step6Data.value[1].params2 && step6Data.value[1].params2 !== "高") {
          step6Data.value[1].isError2 = true;
        } else {
          step6Data.value[1].isError2 = false;
        }
        if (step6Data.value[1].params3 && step6Data.value[1].params3 !== "高") {
          step6Data.value[1].isError3 = true;
        } else {
          step6Data.value[1].isError3 = false;
        }
        if (step6Data.value[2].params1 && step6Data.value[2].params1 !== "高") {
          step6Data.value[2].isError1 = true;
        } else {
          step6Data.value[2].isError1 = false;
        }
        if (step6Data.value[2].params2 && step6Data.value[2].params2 !== "低") {
          step6Data.value[2].isError2 = true;
        } else {
          step6Data.value[2].isError2 = false;
        }
        if (step6Data.value[2].params3 && step6Data.value[2].params3 !== "低") {
          step6Data.value[2].isError3 = true;
        } else {
          step6Data.value[2].isError3 = false;
        }

        if (step7Data.value[0].params && step7Data.value[0].params !== "重要保持用户") {
          step7Data.value[0].isError1 = true;
        } else {
          step7Data.value[0].isError1 = false;
        }
        if (step7Data.value[1].params && step7Data.value[1].params !== "重要价值用户") {
          step7Data.value[1].isError1 = true;
        } else {
          step7Data.value[1].isError1 = false;
        }
        if (step7Data.value[2].params && step7Data.value[2].params !== "一般发展用户") {
          step7Data.value[2].isError1 = true;
        } else {
          step7Data.value[2].isError1 = false;
        }
      }
    })
    .catch((error) => {});
};
const retrain = () => {
  showAnswerFlag.value = false;
  // portraitModel
  //   .retrain({
  //     userId: JSON.parse(getUserInfo()).userId,
  //     module: "RFM分析",
  //   })
  //   .then((res) => {
  proxy.$modal.msgSuccess("重新实训成功");
  for (let i in fileTable1.value) {
    fileTable1.value[i].params = "";
  }
  for (let i in step2Data.value) {
    step2Data.value[i].params1 = "";
    step2Data.value[i].params2 = "";
    step2Data.value[i].params3 = "";
  }
  for (let i in step4Data.value) {
    step4Data.value[i].params1 = "";
    step4Data.value[i].params2 = "";
    step4Data.value[i].params3 = "";
  }
  step5Data.value[0].params1 = "";
  step5Data.value[0].params2 = "";
  step5Data.value[0].params3 = "";
  for (let i in step6Data.value) {
    step6Data.value[i].params1 = "";
    step6Data.value[i].params2 = "";
    step6Data.value[i].params3 = "";
  }
  for (let i in step7Data.value) {
    step7Data.value[i].params = "";
  }
  // })
  // .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 3) {
    if (columnIndex === 0) {
      return [1, 2];
    } else if (columnIndex === 1) {
      return [0, 0];
    }
  }
};
const openKnowledge = () => {
  dialogVisible.value = true;
  startCount();
};
const handlClose = () => {
  console.log(111);
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  console.log("阅读时长", timeCount.value + "s");
  submitTimeCount();
  timeCount.value = 0;
};
const startCount = () => {
  timer.value = setInterval(() => {
    timeCount.value++;
  }, 1000);
};
const submitTimeCount = () => {
  portraitModel
    .timeCountSubmit({
      stuScoreDetailsDTO: {
        userId: JSON.parse(getUserInfo()).userId,
        viewingTime: timeCount.value,
      },
    })
    .then((res) => {})
    .catch((error) => {});
};
</script>

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

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 150px;
    height: 50px;
    background-image: url("@/assets/images/taskImport.png");
    background-size: 150px 50px;
    text-align: center;
    align-items: center;
    line-height: 50px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 8px;
    }
  }
  .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;
      background: #fff8ee;
      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: #fff !important;
  color: #000;
}

/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa !important;
}

::v-deep .el-table td {
  padding-top: 4px;
  padding-bottom: 4px;
}
</style>