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

<template>
  <div class="content">
    <div class="import" @click="dialogVisible = true">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <!-- <div v-if="knowledgeFlag">
      <a
        href="
https://blog.csdn.net/kevin1993best/article/details/106329573"
        target="_blank"
        rel="noopener noreferrer"
      >
        https://blog.csdn.net/kevin1993best/article/details/106329573</a
      >
      <br />
    </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">
          用户粘性分析是一种衡量用户对产品或服务的忠诚度和黏性程度的分析方法。它帮助企业了解用户的行为习惯、使用频率和留存率，以评估用户对产品或服务的依赖程度和忠诚度。用户粘性分析模型通常包括以下指标：活跃用户数、留存率、使用频率、用户转化率、用户流失率。
          <br />
          留存率、用户转化率、用户流失率，前面模型已经单独分析过，本实验项目重点分析用户活跃情况。
          <br />
          常见的用户活跃度统计一段时间内活跃用户的分布情况，如使用了几次、使用了几天、使用了多长时间等。比如一周内用户使用产品的天数分布，使用了 2 天以上的用户占比，连续使用 7 天的用户人数等。
          <br />
          在用户粘性分析的指标中，DAU/MAU就是最频繁使用的指标。日活跃用户占月活跃用户的比例越高，表明用户对App的使用粘性越高。
          <br />
          日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。
          <br />
          周活跃用户（WAU）：每周使用产品或服务的独立用户数量。这个指标可以反映产品的周活跃情况。
          <br />
          月活跃用户（MAU）：每月使用产品或服务的独立用户数量。这个指标可以反映产品的长期使用情况。
          <br />
          用户粘性通常用DAU/MAU的公式来计算，还有一个公式是每月用户平均活跃天数。DAU即日活跃用户数，MAU即月活跃用户数。
          <br />
          比值越趋近于1表明用户活跃度越高，在比值低于0.2时，应用的传播性和互动性将会很弱。
          <br />
          下表为某APP用户的登录日志，假设所有用户共计10名。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="fileTable1"
            style="width: 1000px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户ID" align="center" prop="id1"></el-table-column>
            <el-table-column label="登录时间" align="center" prop="time1"></el-table-column>
            <el-table-column label="登录时长（分钟）" align="center" prop="duration1"></el-table-column>
            <el-table-column label="用户ID" align="center" prop="id2"></el-table-column>
            <el-table-column label="登录时间" align="center" prop="time2"></el-table-column>
            <el-table-column label="登录时长（分钟）" align="center" prop="duration2"></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">
          日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。
          <br />
          日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100%
          <br />
          日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位
          <br />
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step1Data"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="登录时间" align="center" prop="date"></el-table-column>
            <el-table-column label="日活跃用户（个）" align="center" prop="addNum">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px" size="small"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError1" style="color: red">X</span>
                  <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="日活跃率（%）" align="center" prop="day2" width="150">
              <template #default="scope">
                <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px" size="small"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError2" style="color: red">X</span>
                  <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="日活跃平均时长（分钟）" align="center" prop="day3" width="180">
              <template #default="scope">
                <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 90px" size="small"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError3" style="color: red">X</span>
                  <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <div class="draw" style="padding-left: 15px; margin-left: 20px" @click="drawEcharts">绘制图表</div>
            <div id="echartsDom" style="width: 750px; height: 500px"></div>
            <div class="analysisConclusion">分析结论</div>
            <el-input v-model="analysisConclusionStep1" style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px" :rows="12" type="textarea" placeholder="请输入" />
            <div class="submit" @click="step1Submit">提交</div>
          </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">
          周活跃用户（WAU）：每周使用产品或服务的独立用户数量。这个指标可以反映产品的周活跃情况。
          <br />

          周活跃率 = 去重后的周活跃用户数量 / 历史累计去重后的用户数量*100%
        </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="周数" align="center" prop="week"></el-table-column>
            <el-table-column label="日期间隔" align="center" prop="interval"></el-table-column>
            <el-table-column label="周活跃用户（个）" align="center" prop="description">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError1" style="color: red">X</span>
                  <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="周活跃率（%）" align="center" prop="description">
              <template #default="scope">
                <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError2" style="color: red">X</span>
                  <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input v-model="analysisConclusionStep2" style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px" :rows="8" type="textarea" placeholder="请输入" />
            <div class="submit" @click="step2Submit">提交</div>
          </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">月活跃用户（MAU）：每月使用产品或服务的独立用户数量。这个指标可以反映产品的长期使用情况。</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="month"></el-table-column>
            <el-table-column label="月活跃用户（个）" align="center" prop="description">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError1" style="color: red">X</span>
                  <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="月活跃率（%）" align="center" prop="description">
              <template #default="scope">
                <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError2" style="color: red">X</span>
                  <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input v-model="analysisConclusionStep3" style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px" :rows="8" type="textarea" placeholder="请输入" />
            <div class="submit" @click="step3Submit">提交</div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第四步，用户活跃综合分析</span>
        </div>
        <div style="font-size: 14px">
          <div style="margin-bottom: 10px">用户粘性的比率指标</div>
          <div>比率指标1- DAU/MAU</div>
          <div style="display: flex; align-items: center">
            <span>通过用户粘性指标定义为过去一天的比过去30天的</span>
            <img src="@/assets/images/u5627.png" alt="" style="margin-left: 10px" />
          </div>
        </div>
        <div style="font-size: 14px">
          <div>比率指标2 - 月平均活跃天数</div>
          <div style="display: flex; align-items: center">
            <span>分子可理解为过去30天用户的总活跃天数，分母为过去30天活跃用户数 ，分子/分母 即为 过去30天的人均活跃天数</span>
            <img src="@/assets/images/u5626.png" alt="" style="margin-left: 10px" />
          </div>
        </div>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step4Data"
            style="width: 300px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户ID" align="center" prop="id"></el-table-column>
            <el-table-column label="活跃天数" align="center" prop="data1">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError" style="color: red">X</span>
                  <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="step4DataTable2"
            style="width: 400px; margin-left: 20px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="比率指标" align="center" prop="id"></el-table-column>
            <el-table-column label="数值" align="center" prop="data1">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError" style="color: red">X</span>
                  <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input v-model="analysisConclusionStep4" style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px" :rows="8" type="textarea" placeholder="请输入" />
            <div class="submit" @click="step4Submit">提交</div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div>
        <span style="line-height: 25px; font-size: 14px; color: #000">
          DAU/MAU比值越趋近于1表明用户活跃度越高，在比值低于0.2时，应用的传播性和互动性将会很弱。对于常见的App，用户粘性的取值范围就是3%~100%，不同领域的App也会有不同的基准值，例如移动游戏会以20%为基线，而工具类App会以40%为基线。
          <br />

          例子1： 从极限的角度看，如果每天活跃都是同样的用户，例如每天都是1万DAU，那么30天内每天都是这1万用户在活跃，MAU也是1万，于是DAU/MAU就是100%，用户粘性达到上限，微信就是接近100%的例子。
          <br />

          例子2： 另一个极端的例子，如果每天活跃用户都不相同，例如每天1万DAU，那么30天内每天的活跃用户都不同，MAU就是30万，于是DAU/MAU就是1/30，用户完全没有粘性。
          <br />

          在日常的项目和产品运营工作中， 单日的DAU/MAU的数值往往受到周期（工作日/周末）、版本更新和活动的影响，用户粘性在短期内的波动较大。所以通常要采用长期的均值作参考，例如一个月、两个大版本之间。eg:以某客户App为例，DAU/MAU的数值在工作日约50%，而在周末和假期的数值则在20%左右。那么谈到用户粘性的时候，通常采用每天DAU/MAU的平均值39.37%。
        </span>
      </div>
      <div class="line"></div>
    </div>
    <pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
      <template v-slot:content>
        <div v-html="knowledgeHtml"></div>
      </template>
    </pop-modal>
  </div>
</template>

<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const knowledgeHtml = ref(
  `<p style="text-align: start;">对于常见的App，用户粘性的取值范围就是3%~100%，</p><p style="text-align: start;">不同领域的App也会有不同的基准值，</p><p style="text-align: start;">例如移动游戏会以20%为基线，</p><p style="text-align: start;">而工具类App会以40%为基线。</p><h2 style="text-align: start;"><strong>用户粘性的两个计算指标：</strong></h2><h2 style="text-align: start;"><strong>1、DAU/MAU &nbsp; &nbsp;2、月平均活跃人数</strong></h2><p style="text-align: start;">这里其实还想看一个指标，那就是一周内使用1天、2天、3天、3天以上的人数，对比周使用人数去看，相当于周平均活跃人数。</p><p style="text-align: start;"> 用户粘性通常用DAU/MAU的公式来计算，还有一个公式是每月用户平均活跃天数。</p><p style="text-align: start;">DAU即日活跃用户数，MAU即月活跃用户数。</p><p style="text-align: start;">比值越趋近于1表明用户活跃度越高，在比值低于0.2时，应用的传播性和互动性将会很弱。</p><p style="text-align: start;">DAU/MAU是社交游戏类和在线类应用常用的一项评估指标，用于分析用户粘度。</p><p style="text-align: start;"><img src="data:image/png;base64,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
);
const dialogVisible = ref(false);
const list = ref(["-"]);
const dayValue = ref("");
const combinationValue1 = ref("");
const combinationValue2 = ref("");
const analysisConclusion = ref("");
const analysisConclusionStep1 = ref("");
const analysisConclusionStep2 = ref("");
const analysisConclusionStep3 = ref("");
const analysisConclusionStep4 = ref("");
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false);
const step4AnswerFlag = ref(false);
const errorNum = ref(0);
const step1Error = ref(0);
const step2Error = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const knowledgeFlag = ref(false);
const showAnswerFlag = ref(false);
//时间间隔分组数-7天内
const sevenNum = ref(0);
//时间间隔分组数-15天内
const fiftyNum = ref(0);
//时间间隔分组数-30天内
const thirtyNumIn = ref(0);
//时间间隔分组数-30天以上
const thirtyNumOut = ref(0);
const step1Data = ref([
  {
    date: "2024-03-01",
  },
  {
    date: "2024-03-02",
  },
  {
    date: "2024-03-03",
  },
  {
    date: "2024-03-04",
  },
  {
    date: "2024-03-05",
  },
  {
    date: "2024-03-06",
  },
  {
    date: "2024-03-07",
  },
  {
    date: "2024-03-08",
  },
  {
    date: "2024-03-09",
  },
  {
    date: "2024-03-10",
  },
  {
    date: "2024-03-11",
  },
  {
    date: "2024-03-12",
  },
  {
    date: "2024-03-13",
  },
  {
    date: "2024-03-14",
  },
  {
    date: "2024-03-15",
  },
  {
    date: "2024-03-16",
  },
  {
    date: "2024-03-17",
  },
  {
    date: "2024-03-18",
  },
  {
    date: "2024-03-19",
  },
  {
    date: "2024-03-20",
  },
  {
    date: "2024-03-21",
  },
  {
    date: "2024-03-22",
  },
  {
    date: "2024-03-23",
  },
  {
    date: "2024-03-24",
  },
  {
    date: "2024-03-25",
  },
  {
    date: "2024-03-26",
  },
  {
    date: "2024-03-27",
  },
  {
    date: "2024-03-28",
  },
  {
    date: "2024-03-29",
  },
  {
    date: "2024-03-30",
  },
]);
const fileTable1 = ref([
  {
    id1: "A",
    time1: "2024-03-01",
    duration1: "35",
    id2: "F",
    time2: "2024-03-11",
    duration2: "11",
  },
  {
    id1: "E",
    time1: "2024-03-01",
    duration1: "22",
    id2: "C",
    time2: "2024-03-12",
    duration2: "33",
  },
  {
    id1: "B",
    time1: "2024-03-01",
    duration1: "11",
    id2: "D",
    time2: "2024-03-12",
    duration2: "22",
  },

  {
    id1: "H",
    time1: "2024-03-01",
    duration1: "27",
    id2: "H",
    time2: "2024-03-13",
    duration2: "25",
  },
  {
    id1: "F",
    time1: "2024-03-02",
    duration1: "35",
    id2: "D",
    time2: "2024-03-14",
    duration2: "19",
  },
  {
    id1: "C",
    time1: "2024-03-02",
    duration1: "16",
    id2: "B",
    time2: "2024-03-15",
    duration2: "38",
  },
  {
    id1: "D",
    time1: "2024-03-03",
    duration1: "16",
    id2: "D",
    time2: "2024-03-17",
    duration2: "35",
  },
  {
    id1: "B",
    time1: "2024-03-03",
    duration1: "25",
    id2: "C",
    time2: "2024-03-17",
    duration2: "43",
  },
  {
    id1: "G",
    time1: "2024-03-03",
    duration1: "30",
    id2: "C",
    time2: "2024-03-18",
    duration2: "36",
  },
  {
    id1: "D",
    time1: "2024-03-03",
    duration1: "43",
    id2: "K",
    time2: "2024-03-19",
    duration2: "31",
  },
  {
    id1: "C",
    time1: "2024-03-04",
    duration1: "32",
    id2: "A",
    time2: "2024-03-20",
    duration2: "5",
  },
  {
    id1: "D",
    time1: "2024-03-04",
    duration1: "43",
    id2: "D",
    time2: "2024-03-20",
    duration2: "8",
  },
  {
    id1: "B",
    time1: "2024-03-05",
    duration1: "8",
    id2: "C",
    time2: "2024-03-21",
    duration2: "29",
  },
  {
    id1: "D",
    time1: "2024-03-06",
    duration1: "4",
    id2: "D",
    time2: "2024-03-22",
    duration2: "35",
  },
  {
    id1: "C",
    time1: "2024-03-06",
    duration1: "25",
    id2: "C",
    time2: "2024-03-23",
    duration2: "35",
  },
  {
    id1: "K",
    time1: "2024-03-06",
    duration1: "36",
    id2: "K",
    time2: "2024-03-23",
    duration2: "40",
  },
  {
    id1: "A",
    time1: "2024-03-06",
    duration1: "12",
    id2: "A",
    time2: "2024-03-24",
    duration2: "27",
  },
  {
    id1: "D",
    time1: "2024-03-07",
    duration1: "38",
    id2: "D",
    time2: "2024-03-25",
    duration2: "4",
  },
  {
    id1: "C",
    time1: "2024-03-07",
    duration1: "35",
    id2: "B",
    time2: "2024-03-25",
    duration2: "16",
  },
  {
    id1: "J",
    time1: "2024-03-07",
    duration1: "6",
    id2: "G",
    time2: "2024-03-25",
    duration2: "16",
  },
  {
    id1: "B",
    time1: "2024-03-08",
    duration1: "39",
    id2: "B",
    time2: "2024-03-25",
    duration2: "29",
  },
  {
    id1: "A",
    time1: "2024-03-08",
    duration1: "4",
    id2: "D",
    time2: "2024-03-26",
    duration2: "17",
  },
  {
    id1: "E",
    time1: "2024-03-08",
    duration1: "3",
    id2: "C",
    time2: "2024-03-27",
    duration2: "32",
  },
  {
    id1: "B",
    time1: "2024-03-08",
    duration1: "10",
    id2: "K",
    time2: "2024-03-28",
    duration2: "8",
  },
  {
    id1: "H",
    time1: "2024-03-08",
    duration1: "18",
    id2: "H",
    time2: "2024-03-29",
    duration2: "20",
  },
  {
    id1: "F",
    time1: "2024-03-09",
    duration1: "20",
    id2: "B",
    time2: "2024-03-29",
    duration2: "20",
  },
  {
    id1: "F",
    time1: "2024-03-09",
    duration1: "24",
    id2: "G",
    time2: "2024-03-29",
    duration2: "40",
  },
  {
    id1: "B",
    time1: "2024-03-10",
    duration1: "21",
    id2: "D",
    time2: "2024-03-29",
    duration2: "29",
  },
  {
    id1: "H",
    time1: "2024-03-11",
    duration1: "10",
    id2: "A",
    time2: "2024-03-30",
    duration2: "4",
  },
  {
    id1: "F",
    time1: "2024-03-11",
    duration1: "34",
    id2: "C",
    time2: "2024-03-30",
    duration2: "45",
  },
]);
const step2Data = ref([
  {
    week: "第一周",
    interval: "2024/3/1-2024/3/7",
  },
  {
    week: "第二周",
    interval: "2024/3/8-2024/3/14",
  },
  {
    week: "第三周",
    interval: "2024/3/15-2024/3/21",
  },
  {
    week: "第四周",
    interval: "2024/3/22-2024/3/28",
  },
]);
const step3Data = ref([
  {
    month: "2024年3月",
  },
]);
const step4Data = ref([
  {
    id: "A",
  },
  {
    id: "B",
  },
  {
    id: "C",
  },
  {
    id: "D",
  },

  {
    id: "E",
  },
  {
    id: "F",
  },
  {
    id: "G",
  },
  {
    id: "H",
  },
  {
    id: "J",
  },
  {
    id: "K",
  },
]);
const step4DataTable2 = ref([
  {
    id: "过去30天平均DAU/MAU",
  },
  {
    id: "月平均活跃天数（天）",
  },
]);
const step5Data = ref([
  {
    data1: "dd003",
    data2: "B",
    data3: "99",
    data4: "裤子",
    data5: "2024-02-04",
    data6: "1",
  },
  {
    data1: "dd007",
    data2: "D",
    data3: "138",
    data4: "裤子",
    data5: "2024-02-14",
    data6: "2",
  },
  {
    data1: "dd010",
    data2: "D",
    data3: "150",
    data4: "裤子",
    data5: "2024-02-16",
    data6: "3",
  },
  {
    data1: "dd012",
    data2: "D",
    data3: "137",
    data4: "裤子",
    data5: "2024-02-20",
    data6: "4",
  },
  {
    data1: "dd017",
    data2: "A",
    data3: "39",
    data4: "睡衣",
    data5: "2024-02-24",
    data6: "1",
  },
  {
    data1: "dd015",
    data2: "C",
    data3: "94",
    data4: "睡衣",
    data5: "2024-02-23",
    data6: "2",
  },
  {
    data1: "dd019",
    data2: "C",
    data3: "186",
    data4: "睡衣",
    data5: "2024-02-28",
    data6: "3",
  },
  {
    data1: "dd008",
    data2: "B",
    data3: "143",
    data4: "外套",
    data5: "2024-02-14",
    data6: "1",
  },
  {
    data1: "dd011",
    data2: "C",
    data3: "191",
    data4: "外套",
    data5: "2024-02-16",
    data6: "2",
  },
  {
    data1: "dd018",
    data2: "D",
    data3: "99",
    data4: "外套",
    data5: "2024-02-26",
    data6: "3",
  },
  {
    data1: "dd005",
    data2: "F",
    data3: "111",
    data4: "外套",
    data5: "2024-02-10",
    data6: "4",
  },
  {
    data1: "dd001",
    data2: "A",
    data3: "189",
    data4: "衬衫",
    data5: "2024-02-02",
    data6: "1",
  },
  {
    data1: "dd013",
    data2: "B",
    data3: "59",
    data4: "衬衫",
    data5: "2024-02-22",
    data6: "2",
  },
  {
    data1: "dd014",
    data2: "D",
    data3: "173",
    data4: "衬衫",
    data5: "2024-02-22",
    data6: "3",
  },
  {
    data1: "dd002",
    data2: "E",
    data3: "101",
    data4: "短袖",
    data5: "2024-02-02",
    data6: "1",
  },
  {
    data1: "dd020",
    data2: "J",
    data3: "52",
    data4: "短袖",
    data5: "2024-02-28",
    data6: "2",
  },
  {
    data1: "dd016",
    data2: "K",
    data3: "82",
    data4: "短袖",
    data5: "2024-02-24",
    data6: "3",
  },
  {
    data1: "dd009",
    data2: "G",
    data3: "171",
    data4: "帽子",
    data5: "2024-02-15",
    data6: "1",
  },
  {
    data1: "dd006",
    data2: "C",
    data3: "141",
    data4: "皮鞋",
    data5: "2024-02-12",
    data6: "1",
  },
  {
    data1: "dd004",
    data2: "H",
    data3: "176",
    data4: "内衣",
    data5: "2024-02-07",
    data6: "1",
  },
]);
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",
  },
]);
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 typeData = ref([
  {
    data1: "A类商品",
    data2: "占总销售额的80%，需要重点关注",
  },
  {
    data1: "B类商品",
    data2: "占总销售额的10%，给予次要关注",
  },
  {
    data1: "C类商品",
    data2: "占总销售额的10%，给予一般关注",
  },
]);
const dayOptions = ref([
  {
    value: "1日",
    label: "1日",
  },
  {
    value: "2日",
    label: "2日",
  },
  {
    value: "3日",
    label: "3日",
  },
  {
    value: "4日",
    label: "4日",
  },
  {
    value: "5日",
    label: "5日",
  },
  {
    value: "6日",
    label: "6日",
  },
  {
    value: "7日",
    label: "7日",
  },
  {
    value: "8日",
    label: "8日",
  },
  {
    value: "9日",
    label: "9日",
  },

  {
    value: "10日",
    label: "10日",
  },
  {
    value: "11日",
    label: "11日",
  },
  {
    value: "12日",
    label: "12日",
  },
  {
    value: "13日",
    label: "13日",
  },
  {
    value: "14日",
    label: "14日",
  },
]);
const step1RightAnswer = ref([
  {
    activeNum: "4",
    activeRate: "40",
    activeTime: "23.75",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "25.50",
  },
  {
    activeNum: "4",
    activeRate: "40",
    activeTime: "28.50",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "37.50",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "8.00",
  },
  {
    activeNum: "4",
    activeRate: "40",
    activeTime: "19.25",
  },
  {
    activeNum: "3",
    activeRate: "30",
    activeTime: "26.33",
  },
  {
    activeNum: "5",
    activeRate: "50",
    activeTime: "14.80",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "22.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "21.00",
  },
  {
    activeNum: "3",
    activeRate: "30",
    activeTime: "18.33",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "27.50",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "25.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "19.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "38.00",
  },
  {
    activeNum: "0",
    activeRate: "0",
    activeTime: "0.00",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "39.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "36.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "31.00",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "6.50",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "29.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "35.00",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "37.50",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "27.00",
  },
  {
    activeNum: "4",
    activeRate: "40",
    activeTime: "16.25",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "17.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "32.00",
  },
  {
    activeNum: "1",
    activeRate: "10",
    activeTime: "8.00",
  },
  {
    activeNum: "4",
    activeRate: "40",
    activeTime: "27.25",
  },
  {
    activeNum: "2",
    activeRate: "20",
    activeTime: "24.50",
  },
]);
const step2RightAnswer = ref([
  {
    num: "10",
    ratio: "100",
  },
  {
    num: "7",
    ratio: "70",
  },
  {
    num: "5",
    ratio: "50",
  },
  {
    num: "6",
    ratio: "60",
  },
]);
const step4RightAnswer = ref(["6", "10", "11", "13", "2", "5", "3", "5", "1", "4"]);
onMounted(() => {
  getData();
});
onBeforeUnmount(() => {
  saveData();
});
const moveUp = (index, row) => {
  console.log("上移", index, row);
  if (index > 0) {
    const upDate = step2Data.value[index - 1];
    step2Data.value.splice(index - 1, 1);
    step2Data.value.splice(index, 0, upDate);
  } else {
    alert("已经是第一条，不可上移");
  }
};
const moveDown = (index, row) => {
  console.log("下移", index, row);
  if (index + 1 === step2Data.value.length) {
    alert("已经是最后一条，不可下移");
  } else {
    const downDate = step2Data.value[index + 1];
    step2Data.value.splice(index + 1, 1);
    step2Data.value.splice(index, 0, downDate);
  }
};
const addCombination = () => {
  if (list.value[0] == "-") {
    list.value = [];
  }
  // list.value = [];
  if (combinationValue1.value == "" || combinationValue2.vlaue == "") {
    proxy.$modal.msgError("请选择组合");
    return;
  }
  list.value.push(combinationValue1.value + "—" + combinationValue2.value);
};
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 0) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 2) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 2) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 4) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 4) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
  if (rowIndex === 6) {
    if (columnIndex === 6) {
      return [2, 1];
    }
  }
  if (rowIndex === 6) {
    if (columnIndex === 7) {
      return [2, 1];
    }
  }
};
const handleChangeDay = (e) => {
  console.log(e);
};
const draw = () => {
  var chartDom = document.getElementById("echarts");
  var myChart = echarts.init(chartDom, "dark");
  var option;

  option = {
    title: {
      text: "2021/8/1",
      left: "center",
      top: "10",
    },
    tooltip: {
      trigger: "axis",
      formatter: "{c}%",
    },
    xAxis: {
      type: "category",
      data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
    series: [
      {
        data: [100, 88, 73, 60, 54, 38, 33, 25, 18, 12, 10, 9, 6, 4],
        type: "line",
      },
    ],
  };

  option && myChart.setOption(option);
};
const drawEcharts = () => {
  for (let i in step1Data.value) {
    console.log(step1Data.value[i]);
    if (!step1Data.value[i].params1 || !step1Data.value[i].params2 || !step1Data.value[i].params3) {
      proxy.$modal.msgError("请完成所有填空数据");
      return;
    }
  }
  const xAxisData = [];
  const data1 = [];
  const data2 = [];
  for (let item in step1Data.value) {
    // console.log(step1Data.value[item].date);
    xAxisData.push(step1Data.value[item].date);
    data1.push(step1Data.value[item].params2);
    data2.push(step1Data.value[item].params3);
  }
  var chartDom = document.getElementById("echartsDom");
  var myChart = echarts.init(chartDom, "dark");
  var option;

  option = {
    title: {
      text: "日活跃分析图",
      left: "center",
      top: "25",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    legend: {
      data: ["日活跃平均时长(分钟)", "日活跃率"],
      top: 5,
    },
    xAxis: [
      {
        type: "category",
        data: xAxisData,
        // offset:'10',
        axisLabel: {
          interval: 0,
          rotate: 90, //代表逆时针旋转45度
          fontSize: "0.6rem",
        },
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "日活跃平均时长",
        min: 0,
        // max: 250,
        interval: 10,
        axisLabel: {
          formatter: "{value}",
        },
      },
      {
        type: "value",
        name: "日活跃率",
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "日活跃平均时长(分钟)",
        type: "bar",
        itemStyle: {
          color: "#F4DAA6",
        },
        tooltip: {
          valueFormatter: function (value) {
            return value + "分钟";
          },
        },
        data: data2,
      },
      {
        name: "日活跃率",
        type: "line",
        itemStyle: {
          color: "#D052E5",
        },
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + "%";
          },
        },
        data: data1,
      },
    ],
  };

  option && myChart.setOption(option);
};
const step1Submit = () => {
  step1Error.value = 0;
  for (let i in step1Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step1Data.value[i].params1 || !step1Data.value[i].params2 || !step1Data.value[i].params3) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  for (let i in step1Data.value) {
    if (step1Data.value[i].params1 != step1RightAnswer.value[i].activeNum) {
      step1Error.value++;
      step1Data.value[i].isError1 = true;
    } else {
      step1Data.value[i].isError1 = false;
    }
    if (step1Data.value[i].params2 != step1RightAnswer.value[i].activeRate) {
      step1Error.value++;
      step1Data.value[i].isError2 = true;
    } else {
      step1Data.value[i].isError2 = false;
    }
    if (step1Data.value[i].params3 != step1RightAnswer.value[i].activeTime) {
      step1Error.value++;
      step1Data.value[i].isError3 = true;
    } else {
      step1Data.value[i].isError3 = false;
    }
  }
  console.log(step1Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step1AnswerFlag.value = true;
};
const step2Submit = () => {
  step2Error.value = 0;
  for (let i in step2Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step2Data.value[i].params1 || !step2Data.value[i].params2) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  for (let i in step2Data.value) {
    if (step2Data.value[i].params1 != step2RightAnswer.value[i].num) {
      step2Error.value++;
      step2Data.value[i].isError1 = true;
    } else {
      step2Data.value[i].isError1 = false;
    }
    if (step2Data.value[i].params2 != step2RightAnswer.value[i].ratio) {
      step2Error.value++;
      step2Data.value[i].isError2 = true;
    } else {
      step2Data.value[i].isError2 = false;
    }
  }
  console.log(step2Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step2AnswerFlag.value = true;
};
const step3Submit = () => {
  step3Error.value = 0;
  for (let i in step3Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step3Data.value[i].params1 || !step3Data.value[i].params2) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step3Data.value[0].params1 != "10") {
    step3Error.value++;
    step3Data.value[0].isError1 = true;
  } else {
    step3Data.value[0].isError1 = false;
  }
  if (step3Data.value[0].params2 != "100") {
    step3Error.value++;
    step3Data.value[0].isError2 = true;
  } else {
    step3Data.value[0].isError2 = false;
  }
  // console.log(89);
  console.log(step3Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step3AnswerFlag.value = true;
};
const step4Submit = () => {
  step4Error.value = 0;
  for (let i in step4Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step4Data.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  for (let i in step4DataTable2.value) {
    // console.log(fileTable1.value[i]);
    if (!step4DataTable2.value[i].params1) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  for (let i in step4Data.value) {
    if (step4Data.value[i].params1 != step4RightAnswer.value[i]) {
      step4Error.value++;
      step4Data.value[i].isError = true;
    } else {
      step4Data.value[i].isError = false;
    }
  }
  if (step4DataTable2.value[0].params1 != "20") {
    step4Error.value++;
    step4DataTable2.value[0].isError = true;
  } else {
    step4DataTable2.value[0].isError = false;
  }
  if (step4DataTable2.value[1].params1 != "3") {
    step4Error.value++;
    step4DataTable2.value[1].isError = true;
  } else {
    step4DataTable2.value[1].isError = false;
  }
  console.log(step4Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
};
const saveData = () => {
  let infoList = [];
  for (let i in step1Data.value) {
    infoList.push({
      loginTime: step1Data.value[i].date,
      activeUser: parseInt(step1Data.value[i].params1),
      activeUserRate: parseFloat(step1Data.value[i].params2),
      activeUserTime: parseFloat(step1Data.value[i].params3),
    });
  }
  const params = {
    stepFiveA: step2Data.value[0].params1,
    stepFiveB: step2Data.value[0].params2,
    stepFiveC: step2Data.value[1].params1,
    stepFiveD: step2Data.value[1].params2,
    stepSixA: step2Data.value[2].params1,
    stepSixB: step2Data.value[2].params2,
    stepSixC: step2Data.value[3].params1,
    stepSixD: step2Data.value[3].params2,
    stepSevenA: step3Data.value[0].params1,
    stepSevenB: step3Data.value[0].params2,
    stepSevenC: step4Data.value[0].params1,
    stepSevenD: step4Data.value[1].params1,
    stepEightA: step4Data.value[2].params1,
    stepEightB: step4Data.value[3].params1,
    stepEightC: step4Data.value[4].params1,
    stepEightD: step4Data.value[5].params1,
    stepNineA: step4Data.value[6].params1,
    stepNineB: step4Data.value[7].params1,
    stepNineC: step4Data.value[8].params1,
    stepNineD: step4Data.value[9].params1,
    stepTenA: step4DataTable2.value[0].params1,
    stepTenB: step4DataTable2.value[1].params1,
    stepTenC: analysisConclusionStep1.value,
    stepTenD: analysisConclusionStep2.value,
    stepElevenA: analysisConclusionStep3.value,
    stepOneA: analysisConclusionStep4.value,
    // stepOneB: step1Data.value[8].params3,
    // stepOneC: step1Data.value[9].params1,
    // stepOneD: step1Data.value[9].params2,
    // stepTwoA: step1Data.value[9].params3,
    // stepTwoB: step4Data.value[6].params2,
    // stepTwoC: step5DataTable2.value[0].params,
    // stepThreeA: step5DataTable2.value[1].params,
    // stepThreeB: step5DataTable2.value[2].params,
    // stepThreeC: step5DataTable2.value[3].params,
    // stepThreeD: step5DataTable2.value[4].params,
    // stepFourA: step5DataTable3.value[0].params1,
    // stepFourB: step5DataTable3.value[0].params2,
    // stepFourC: step5DataTable3.value[1].params1,
    // stepFourD: step5DataTable3.value[1].params2,
    // stepNewOne: step5DataTable3.value[2].params1,
    // stepNewTwo: step5DataTable3.value[2].params2,
    // stepNewThree: step5DataTable3.value[3].params1,
    // stepNewFive: step5DataTable3.value[3].params2,
    // stepNewSix: step5DataTable3.value[4].params1,
    // stepNewEight: step5DataTable3.value[4].params2,
    stuMachineLearningInfoDTOList: infoList,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "用户粘性分析",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};
const saveSubmitData = () => {
  let infoList = [];
  for (let i in step1Data.value) {
    infoList.push({
      loginTime: step1Data.value[i].date,
      activeUser: parseInt(step1Data.value[i].params1),
      activeUserRate: parseFloat(step1Data.value[i].params2),
      activeUserTime: parseFloat(step1Data.value[i].params3),
    });
  }
  const params = {
    stepFiveA: step2Data.value[0].params1,
    stepFiveB: step2Data.value[0].params2,
    stepFiveC: step2Data.value[1].params1,
    stepFiveD: step2Data.value[1].params2,
    stepSixA: step2Data.value[2].params1,
    stepSixB: step2Data.value[2].params2,
    stepSixC: step2Data.value[3].params1,
    stepSixD: step2Data.value[3].params2,
    stepSevenA: step3Data.value[0].params1,
    stepSevenB: step3Data.value[0].params2,
    stepSevenC: step4Data.value[0].params1,
    stepSevenD: step4Data.value[1].params1,
    stepEightA: step4Data.value[2].params1,
    stepEightB: step4Data.value[3].params1,
    stepEightC: step4Data.value[4].params1,
    stepEightD: step4Data.value[5].params1,
    stepNineA: step4Data.value[6].params1,
    stepNineB: step4Data.value[7].params1,
    stepNineC: step4Data.value[8].params1,
    stepNineD: step4Data.value[9].params1,
    stepTenA: step4DataTable2.value[0].params1,
    stepTenB: step4DataTable2.value[1].params1,
    stepTenC: analysisConclusionStep1.value,
    stepTenD: analysisConclusionStep2.value,
    stepElevenA: analysisConclusionStep3.value,
    stepOneA: analysisConclusionStep4.value,
    // stepOneB: step1Data.value[8].params3,
    // stepOneC: step1Data.value[9].params1,
    // stepOneD: step1Data.value[9].params2,
    // stepTwoA: step1Data.value[9].params3,
    // stepTwoB: step4Data.value[6].params2,
    // stepTwoC: step5DataTable2.value[0].params,
    // stepThreeA: step5DataTable2.value[1].params,
    // stepThreeB: step5DataTable2.value[2].params,
    // stepThreeC: step5DataTable2.value[3].params,
    // stepThreeD: step5DataTable2.value[4].params,
    // stepFourA: step5DataTable3.value[0].params1,
    // stepFourB: step5DataTable3.value[0].params2,
    // stepFourC: step5DataTable3.value[1].params1,
    // stepFourD: step5DataTable3.value[1].params2,
    // stepNewOne: step5DataTable3.value[2].params1,
    // stepNewTwo: step5DataTable3.value[2].params2,
    // stepNewThree: step5DataTable3.value[3].params1,
    // stepNewFive: step5DataTable3.value[3].params2,
    // stepNewSix: step5DataTable3.value[4].params1,
    // stepNewEight: step5DataTable3.value[4].params2,
    stuMachineLearningInfoDTOList: infoList,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "用户粘性分析",
      ...params,
      subState: 1,
    })
    .then((res) => {})
    .catch((error) => {});
};
const getData = () => {
  portraitModel
    .getData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "用户粘性分析",
    })
    .then((res) => {
      for (let i in res.data.stuMachineLearningInfoDTOList) {
        if (res.data.stuMachineLearningInfoDTOList[i].loginTime == step1Data.value[i].date) {
          step1Data.value[i].params1 = res.data.stuMachineLearningInfoDTOList[i].activeUser;
          step1Data.value[i].params2 = res.data.stuMachineLearningInfoDTOList[i].activeUserRate;
          step1Data.value[i].params3 = res.data.stuMachineLearningInfoDTOList[i].activeUserTime;
        }
      }
      step2Data.value[0].params1 = res.data.stepFiveA;
      step2Data.value[0].params2 = res.data.stepFiveB;
      step2Data.value[1].params1 = res.data.stepFiveC;
      step2Data.value[1].params2 = res.data.stepFiveD;
      step2Data.value[2].params1 = res.data.stepSixA;
      step2Data.value[2].params2 = res.data.stepSixB;
      step2Data.value[3].params1 = res.data.stepSixC;
      step2Data.value[3].params2 = res.data.stepSixD;
      step3Data.value[0].params1 = res.data.stepSevenA;
      step3Data.value[0].params2 = res.data.stepSevenB;
      step4Data.value[0].params1 = res.data.stepSevenC;
      step4Data.value[1].params1 = res.data.stepSevenD;
      step4Data.value[2].params1 = res.data.stepEightA;
      step4Data.value[3].params1 = res.data.stepEightB;
      step4Data.value[4].params1 = res.data.stepEightC;
      step4Data.value[5].params1 = res.data.stepEightD;
      step4Data.value[6].params1 = res.data.stepNineA;
      step4Data.value[7].params1 = res.data.stepNineB;
      step4Data.value[8].params1 = res.data.stepNineC;
      step4Data.value[9].params1 = res.data.stepNineD;
      step4DataTable2.value[0].params1 = res.data.stepTenA;
      step4DataTable2.value[1].params1 = res.data.stepTenB;
      analysisConclusionStep1.value = res.data.stepTenC;
      analysisConclusionStep2.value = res.data.stepTenD;
      analysisConclusionStep3.value = res.data.stepElevenA;
      analysisConclusionStep4.value = res.data.stepOneA;
      // step1Data.value[8].params3 = res.data.stepOneB;
      // step1Data.value[9].params1 = res.data.stepOneC;
      // step1Data.value[9].params2 = res.data.stepOneD;
      // step1Data.value[9].params3 = res.data.stepTwoA;
      // step4Data.value[6].params2 = res.data.stepTwoB;
      // step5DataTable2.value[0].params = res.data.stepTwoC;
      // step5DataTable2.value[1].params = res.data.stepThreeA;
      // step5DataTable2.value[2].params = res.data.stepThreeB;
      // step5DataTable2.value[3].params = res.data.stepThreeC;
      // step5DataTable2.value[4].params = res.data.stepThreeD;
      // step5DataTable3.value[0].params1 = res.data.stepFourA;
      // step5DataTable3.value[0].params2 = res.data.stepFourB;
      // step5DataTable3.value[1].params1 = res.data.stepFourC;
      // step5DataTable3.value[1].params2 = res.data.stepFourD;
      // step5DataTable3.value[2].params1 = res.data.stepNewOne;
      // step5DataTable3.value[2].params2 = res.data.stepNewTwo;
      // step5DataTable3.value[3].params1 = res.data.stepNewThree;
      // step5DataTable3.value[3].params2 = res.data.stepNewFive;
      // step5DataTable3.value[4].params1 = res.data.stepNewSix;
      // step5DataTable3.value[4].params2 = res.data.stepNewEight;
      //回显答案
      if (res.data.subState & (res.data.subState == 1)) {
        showAnswerFlag.value = true;
        for (let i in step1Data.value) {
          if (step1Data.value[i].params1 != step1RightAnswer.value[i].activeNum) {
            step1Data.value[i].isError1 = true;
          } else {
            step1Data.value[i].isError1 = false;
          }
          if (step1Data.value[i].params2 != step1RightAnswer.value[i].activeRate) {
            step1Data.value[i].isError2 = true;
          } else {
            step1Data.value[i].isError2 = false;
          }
          if (step1Data.value[i].params3 != step1RightAnswer.value[i].activeTime) {
            step1Data.value[i].isError3 = true;
          } else {
            step1Data.value[i].isError3 = false;
          }
        }

        for (let i in step2Data.value) {
          if (step2Data.value[i].params1 != step2RightAnswer.value[i].num) {
            step2Data.value[i].isError1 = true;
          } else {
            step2Data.value[i].isError1 = false;
          }
          if (step2Data.value[i].params2 != step2RightAnswer.value[i].ratio) {
            step2Data.value[i].isError2 = true;
          } else {
            step2Data.value[i].isError2 = false;
          }
        }

        if (step3Data.value[0].params1 != "10") {
          step3Data.value[0].isError1 = true;
        } else {
          step3Data.value[0].isError1 = false;
        }
        if (step3Data.value[0].params2 != "100") {
          step3Data.value[0].isError2 = true;
        } else {
          step3Data.value[0].isError2 = false;
        }

        for (let i in step4Data.value) {
          if (step4Data.value[i].params1 != step4RightAnswer.value[i]) {
            step4Data.value[i].isError = true;
          } else {
            step4Data.value[i].isError = false;
          }
        }
        if (step4DataTable2.value[0].params1 != "20") {
          step4DataTable2.value[0].isError = true;
        } else {
          step4DataTable2.value[0].isError = false;
        }
        if (step4DataTable2.value[1].params1 != "3") {
          step4DataTable2.value[1].isError = true;
        } else {
          step4DataTable2.value[1].isError = false;
        }
      }
    })
    .catch((error) => {});
};
const downloadData = () => {
  // portraitModel
  //   .downloadDataByViscosity({})
  //   .then((res) => {
  //     // console.log(res,'--');
  //     const blob = new Blob([res], { type: "application/vnd.ms-excel" });
  //     downBlobFile(`案例数据-用户粘性分析`, blob);
  //   })
  //   .catch((error) => {});
  window.open(baseUrl + "/api/downDataByUserPortrait/analysisByStickiness");
};
const submitData = () => {
  if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
    proxy.$modal.msgError("请先完成所有步骤！");
    return;
  }
  errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value;
  console.log(errorNum.value, "总错误次数");
  portraitModel
    .submit({
      userId: JSON.parse(getUserInfo()).userId,
      taskName: "用户粘性分析",
      numberOfErrors: errorNum.value,
      subState: 1,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
      showAnswerFlag.value = true;
      saveSubmitData();
    })
    .catch((error) => {});
};
const retrain = () => {
  portraitModel
    .retrain({
      userId: JSON.parse(getUserInfo()).userId,
      module: "用户粘性分析",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");

      for (let i in step1Data.value) {
        step1Data.value[i].params1 = "";
        step1Data.value[i].params2 = "";
        step1Data.value[i].params3 = "";
      }
      for (let i in step2Data.value) {
        step2Data.value[i].params1 = "";
        step2Data.value[i].params2 = "";
      }
      for (let i in step3Data.value) {
        step3Data.value[i].params1 = "";
        step3Data.value[i].params2 = "";
      }
      for (let i in step4Data.value) {
        step4Data.value[i].params1 = "";
      }
      for (let i in step4DataTable2.value) {
        step4DataTable2.value[i].params1 = "";
      }
      analysisConclusionStep1.value = "";
      analysisConclusionStep2.value = "";
      analysisConclusionStep3.value = "";
      analysisConclusionStep4.value = "";
      // dayValue.value = "";
    })
    .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  // background: rgba(0, 29, 64, 0.5);
  background: #fff;
  border: 1px solid #0452c6;
  padding: 10px;
  //   opacity: 0.5;
  a:hover {
    text-decoration: underline;
  }
  .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 {
    color: #000;
    .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;
      }
    }
    .secondTitle {
      margin-top: 10px;
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .addBtn {
    background-color: #6af5fb;
    color: #080138;
    height: 31px;
    border: 1px solid #6af5fb;
    margin-left: 10px;
  }
  .comList {
    ul {
      text-align: center;
      list-style-type: none;
      border: 1px solid #7190d4;
      border-bottom: none;
      width: 124px;
      padding: 0;
      // padding: 0;
      margin: 0;
      p {
        width: 122px;
        height: 40px;
        line-height: 40px;
        background: #6e70f0;
        margin: 0;
      }
      li {
        padding: 0;
        margin: 0;
        line-height: 30px;
        width: 122px;
        height: 30px;
        background: #003b75;
        border-bottom: 1px solid #7190d4;
        font-size: 14px;
      }
    }
  }
  .draw {
    width: 89px;
    height: 31px;
    background: url("@/assets/images/绘制.png");
    text-align: center;
    line-height: 31px;
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }
  .analysis {
    width: 577px;
    height: 117px;
    background: #005b55;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 14px;
    padding-left: 20px;
    padding-top: 12px;
    .conclusion {
      // display: block;

      margin-bottom: 10px;
      font-size: 16px;
    }
  }
  .generateBtn {
    width: 185px;
    height: 31px;
    background: url("@/assets/images/生成统计.png");
    text-align: center;
    line-height: 31px;
    color: #000;
    font-size: 14px;
    cursor: pointer;
  }
  .analysisConclusion {
    background: url("@/assets/images/分析.png");
    width: 89px;
    height: 31px;
    text-align: center;
    line-height: 31px;
    color: #000;
    font-size: 14px;
    // cursor: pointer;
    margin-left: 20px;
    padding-left: 10px;
  }
}
// ::v-deep .el-table tr {
//   background-color: #002652 !important;
//   color: #fff;
// }
::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-textarea__inner {
  // background: #002652;
  color: #000;
  // color: #5397C3;
}
::v-deep .el-table td {
  padding-top: 4px;
  padding-bottom: 4px;
}
</style>