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

<template>
  <div class="content">
    <div class="import" @click="knowledgeFlag = !knowledgeFlag">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div v-if="knowledgeFlag">
      <a
        href="
https://www.zhihu.com/question/620095154/answer/3351195697"
        target="_blank"
        rel="noopener noreferrer"
      >
        https://www.zhihu.com/question/620095154/answer/3351195697</a
      ><br />

      <a
        href="
https://www.sohu.com/a/528399751_218639"
        target="_blank"
        rel="noopener noreferrer"
      >
        https://www.sohu.com/a/528399751_218639</a
      ><br />

      <a
        href="
https://help.fanruan.com/finebi5.1/doc-view-1256.html"
        target="_blank"
        rel="noopener noreferrer"
      >
        https://help.fanruan.com/finebi5.1/doc-view-1256.html</a
      >
      <br />
    </div>
    <div v-if="!knowledgeFlag">
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/caseIcon.png" alt="" />
          <span>案例背景：</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          某买菜app想通过 AARRR模型分析自己的增长优势和弱势，获取更大的市场。
          <br />

          AARRR模型的实质是一个用户生命周期模型，关注用户获取(Acquisition)
          、激活(Activation)、留存(Retention) 、收入(Revenue) 和自传播(Refer)
          这五个方面，描述了用户从了解一个产品或服务到成为忠实用户的整个过程，对应于产品生命周期中的五个阶段。
        </span>
      </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="margin-top: 10px; display: flex">
          <div>
            <div
              class="draw"
              style="padding-left: 25px; margin-left: 20px"
              @click="drawEcharts"
            >
              生成可视化展现
            </div>
            <div id="echarts1" style="width: 500px; height: 320px"></div>
          </div>
          <div class="step1Table">
            <div class="titleTable">推广渠道对比（平均一次浏览时间）</div>
            <el-table
              :data="step1Data"
              style="width: 500px; margin-left: 45px; margin-top: 15px"
              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="浏览时间" align="center" prop="data2">
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 40px">
            <div class="analysisBtn">图表分析</div>
            <div style="margin-left: 20px">
              <p>1、推广渠道中，获客数量最多的是：</p>
              <el-select
                v-model="step1Params1"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'基础线上工作'" :value="'基础线上工作'" />
                <el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
                <el-option :label="'新媒体推广'" :value="'新媒体推广'" />
                <el-option :label="'线下活动推广'" :value="'线下活动推广'" />
              </el-select>
            </div>
            <div style="margin-left: 20px">
              <p>2、哪种渠道的获客质量最高：</p>
              <el-select
                v-model="step1Params2"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'基础线上工作'" :value="'基础线上工作'" />
                <el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
                <el-option :label="'新媒体推广'" :value="'新媒体推广'" />
                <el-option :label="'线下活动推广'" :value="'线下活动推广'" />
              </el-select>
            </div>
            <div class="submit" style="margin-top: 75px" @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">
          有了用户之后就需要提高活跃度，用户光注册没啥用，需要经常登录、使用app才行。据有效数据表明，当新用户进入产品之后的次日活跃开始计算，80%以上的新用户都不会被再次激活。而对于买菜app来说，只有产生过订单的用户才能算作被激活。<br />
          对各月份的用户新增情况进行分析，折线图如下图：
        </span>
        <div style="margin-top: 10px; display: flex">
          <div>
            <div
              @click="drawLineEchart"
              class="draw"
              style="
                padding-left: 25px;
                margin-bottom: 10px;
                background-size: 180px 31px;
                width: 180px;
                padding-left: 32px;
              "
            >
              生成月度激活率图表
            </div>
            <div id="echartsLine" style="width: 1000px; height: 274px"></div>
          </div>
          <div style="margin-top: 40px">
            <div class="analysisBtn">图表分析</div>
            <div style="margin-left: 20px">
              <p>1、月度平均激活率是多少：</p>
              <el-select
                v-model="step2Params1"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'50%'" :value="'50%'" />
                <el-option :label="'60%'" :value="'60%'" />
                <el-option :label="'70%'" :value="'70%'" />
                <el-option :label="'80%'" :value="'80%'" />
                <el-option :label="'90%'" :value="'90%'" />
              </el-select>
            </div>
            <div style="margin-left: 20px">
              <p>2、需要重点分析哪个月的激活率：</p>
              <el-select
                v-model="step2Params2"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in activationList"
                  :key="item.value"
                />
              </el-select>
            </div>
            <div class="submit" style="margin-top: 75px" @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">
          用户激活之后，不留存的话最终也都将流失，徒劳一场。对于买菜app来说，用户激活之后，如果不能留下来的话，那此前的工作基本都是无用的。我们可以分析一周留存率、双周留存率和月留存率，发现用户留存率仍有较大提升空间，可以分析流失原因，进一步提高产品体验，挽留已有客户。
        </span>
        <div style="margin-top: 10px; display: flex">
          <div>
            <div class="draw" style="padding-left: 25px; margin-bottom: 10px">
              生成留存率图表
            </div>

            <el-table
              :data="step3Data"
              style="width: 1000px"
              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="ratio1"
              >
              </el-table-column>
              <el-table-column
                label="两周留存率（%）"
                align="center"
                prop="ratio2"
              >
              </el-table-column>
              <el-table-column
                label="30天留存率（%）"
                align="center"
                prop="ratio3"
              >
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 40px">
            <div class="analysisBtn">图表分析</div>
            <div style="margin-left: 20px">
              <p>1、两周平均留存率是多少：</p>
              <el-select
                v-model="step3Params1"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'37.63%'" :value="'37.63%'" />
                <el-option :label="'13.25%'" :value="'13.25%'" />
                <el-option :label="'14.11%'" :value="'14.11%'" />
              </el-select>
            </div>
            <div style="margin-left: 20px">
              <p>2、从哪个时间段开始留存下来的客户，是公司的忠诚用户：</p>
              <el-select
                v-model="step3Params2"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'一周'" :value="'一周'" />
                <el-option :label="'两周'" :value="'两周'" />
                <el-option :label="'30天'" :value="'30天'" />
              </el-select>
            </div>
            <div class="submit" style="margin-top: 75px" @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>
        <span style="line-height: 25px; font-size: 14px">
          获取收入，对产品来说是最重要的一点，当用户激活后，需要考虑的就是如何最大化获取收入，实现盈利。买菜软件的盈利与很多指标有关，我们暂且以提高用户的购买活跃度作为提高收入的的一个主要方式。我们将用户分为三个大类：低活跃用户，普通用户，会员用户。
        </span>
        <div style="margin-top: 10px; display: flex">
          <div>
            <el-table
              :data="step4Data"
              style="width: 500px"
              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="划分标准" align="center" prop="data2">
              </el-table-column>
              <el-table-column label="用户数量" align="center" prop="data3">
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div class="analysisBtn">图表分析</div>
            <div style="margin-left: 20px">
              <div style="margin-top: 10px">
                1、各类用户占比：（计算结果保留一位小数）
              </div>
              <div style="display: flex">
                <div style="margin-right: 50px">
                  <p>低活跃用户：</p>
                  <el-input
                    style="width: 107px"
                    v-model="step4Params1"
                  ></el-input>
                </div>
                <div style="margin-right: 50px">
                  <p>普通用户：</p>
                  <el-input
                    style="width: 107px"
                    v-model="step4Params2"
                  ></el-input>
                </div>
                <div>
                  <p>会员用户：</p>
                  <el-input
                    style="width: 107px"
                    v-model="step4Params3"
                  ></el-input>
                </div>
              </div>
            </div>
            <div style="margin-left: 20px">
              <p>2、需要针对哪类用户制定营销手段来提高他们的活跃度：</p>
              <el-select
                v-model="step4Params4"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option :label="'低活跃用户'" :value="'低活跃用户'" />
                <el-option :label="'普通用户'" :value="'普通用户'" />
                <el-option :label="'会员用户'" :value="'会员用户'" />
              </el-select>
            </div>
            <div class="submit" style="margin-top: 25px" @click="step4Submit">
              提交
            </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">
          当产品有了一定规模的用户之后，就需要考虑激发用户间的自发传播。自传播的数据指标是K因子（推荐系数）：<br />
          K = （平均每个用户向他的朋友们发出的邀请的数量）*
          （接收到邀请的人转化为新用户的转化率）<br />
          K值的高低，直接体现自传播结果水平，当K值大于1时，将激发自传播巨大的力量，K值越大，力量越强。而若K值小于1，那么传播水平会逐步减弱，直至消失。
        </span>
        <div style="margin-top: 10px; display: flex">
          <div>
            <el-table
              :data="step5Data"
              style="width: 500px"
              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="推荐次数" align="center" prop="data2">
              </el-table-column>
              <el-table-column label="接受推荐人数" align="center" prop="data3">
              </el-table-column>
              <el-table-column label="K值" align="center" prop="data4">
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div class="analysisBtn">图表分析</div>
            <div style="margin-left: 20px">
              <div style="display: flex">
                <div style="margin-right: 50px">
                  <p>该买菜app的K值为：（计算结果保留两位小数）</p>
                  <el-input
                    style="width: 107px"
                    v-model="step5Params"
                  ></el-input>
                </div>
              </div>
            </div>
            <div style="margin-left: 20px" class="conclusion">
              结论：拥有了自传播的力量。可以进一步通过“邀请获红包”等运营活动进一步提高
              K 值，加快传播速度
            </div>
            <div class="submit" style="margin-top: 15px" @click="step5Submit">
              提交
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const knowledgeHtml = ref(
  `<p style="text-align: left;">复购率分析是评估消费者对某一品牌或产品忠诚度的重要指标，它反映了消费者满意度和重复购买的行为。通过复购率分析，企业可以更好地了解消费者的购买行为和需求，从而制定更精准的营销策略和产品优化方向。</p><p style="text-align: left;">复购率的计算有两种主要方法：</p><p style="text-align: left;">按客户计算：一定时间内再次购买的客户的人数除以购买的总人数。这种方法不考虑客户购买的次数，只关注是否有重复购买行为。</p><p style="text-align: left;">按订单计算：一定时间内再次购买的客户的订单数除以购买的总订单数。这种方法会统计多次购买的客户订单，区分每次购买的订单。</p><p style="text-align: left;">推荐企业采取按客户计算的复购率算法，因为它更能反映消费者的忠诚度。然而，按订单计算的复购率可能会因为多次购买的客户产生的订单数较多而显得更高。</p><p style="text-align: left;">复购率分析的重要性体现在以下几个方面：</p><p style="text-align: left;">反映客户忠诚度：高复购率意味着消费者对产品的认可度高，愿意再次购买，从而反映出较高的客户忠诚度。</p><p style="text-align: left;">预测销售趋势：通过分析复购率的变化趋势，企业可以预测产品的未来表现，做出更明智的选品决策。</p><p style="text-align: left;">指导选品策略：结合其他指标如销售额、转化率等，对复购率进行综合分析，可以帮助企业筛选出具有潜力的爆款产品。</p><p style="text-align: left;">为了进行复购率分析，企业可以采用以下步骤：</p><p style="text-align: left;">1.收集数据：收集包括订单ID、订单日期、客户名称等指标的数据。</p><p style="text-align: left;">2.计算复购率：根据收集的数据计算一个月内每个用户的购买次数、统计一个月内的购买人数、统计每个月内多次购买的人数并计算月复购率。</p><p style="text-align: left;">3.可视化展示：通过可视化图表的形式展示复购率数据，发现数据规律和问题，如复购时间间隔分析、商品复购分析等。</p><p style="text-align: left;">4.结论分析：根据复购率和用户总数的变化趋势，分析用户黏性的健康度，制定相应的运营策略。</p><p style="text-align: left;">通过复购率分析，企业不仅可以评估现有客户的忠诚度和满意度，还可以预测未来的销售趋势，为产品优化和营销策略提供有力支持。</p>`
);
const list = ref(["-"]);
const dayValue = ref("");
const combinationValue1 = ref("");
const combinationValue2 = ref("");
const analysisConclusion = ref("");
const errorNum = ref(0);
const step1Error = ref(0);
const step2Error = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const step5Error = ref(0);
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false);
const step4AnswerFlag = ref(false);
const step5AnswerFlag = ref(false);
const step1Params1 = ref("");
const step1Params2 = ref("");
const step2Params1 = ref("");
const step2Params2 = ref("");
const step3Params1 = ref("");
const step3Params2 = ref("");
const step4Params1 = ref("");
const step4Params2 = ref("");
const step4Params3 = ref("");
const step4Params4 = ref("");
const step5Params = ref("");
const knowledgeFlag = ref(false);
//时间间隔分组数-7天内
const sevenNum = ref(0);
//时间间隔分组数-15天内
const fiftyNum = ref(0);
//时间间隔分组数-30天内
const thirtyNumIn = ref(0);
//时间间隔分组数-30天以上
const thirtyNumOut = ref(0);
const activationList = ref([
  {
    label: "2020-01",
    value: "2020-01",
  },
  {
    label: "2020-02",
    value: "2020-02",
  },
  {
    label: "2020-03",
    value: "2020-03",
  },
  {
    label: "2020-04",
    value: "2020-04",
  },
  {
    label: "2020-05",
    value: "2020-05",
  },
  {
    label: "2020-06",
    value: "2020-06",
  },
  {
    label: "2020-07",
    value: "2020-07",
  },
  {
    label: "2020-08",
    value: "2020-08",
  },
  {
    label: "2020-09",
    value: "2020-09",
  },
  {
    label: "2020-10",
    value: "2020-10",
  },
]);
const step1Data = ref([
  {
    data1: "基础线上工作",
    data2: "300.04",
  },
  {
    data1: "手机厂商预装",
    data2: "104.92",
  },
  {
    data1: "新媒体推广",
    data2: "274.55",
  },
  {
    data1: "线下互动推广",
    data2: "400.06",
  },
  {
    data1: "合计",
    data2: "319.95",
  },
]);
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([
  {
    date: "2020-01",
    ratio1: "28.91%",
    ratio2: "6.25%",
    ratio3: "7.81%",
  },
  {
    date: "2020-02",
    ratio1: "30.56%",
    ratio2: "14.20%",
    ratio3: "17.90%",
  },
  {
    date: "2020-03",
    ratio1: "36.65%",
    ratio2: "12.62%",
    ratio3: "16.02%",
  },
  {
    date: "2020-04",
    ratio1: "40.70%",
    ratio2: "18.02%",
    ratio3: "17.15%",
  },
  {
    date: "2020-05",
    ratio1: "32.62%",
    ratio2: "13.85%",
    ratio3: "19.38%",
  },
  {
    date: "2020-06",
    ratio1: "35.34%",
    ratio2: "14.08%",
    ratio3: "16.95%",
  },
  {
    date: "2020-07",
    ratio1: "32.00%",
    ratio2: "16.31%",
    ratio3: "13.54%",
  },
  {
    date: "2020-08",
    ratio1: "37.11%",
    ratio2: "17.85%",
    ratio3: "16.43%",
  },
  {
    date: "2020-09",
    ratio1: "36.51%",
    ratio2: "12.83%",
    ratio3: "14.80%",
  },
  {
    date: "2020-10",
    ratio1: "37.63%",
    ratio2: "6.45%",
    ratio3: "1.08%",
  },
  {
    date: "合计",
    ratio1: "34.80%",
    ratio2: "13.25%",
    ratio3: "14.11%",
  },
]);
const step4Data = ref([
  {
    data1: "低活跃用户",
    data2: "0＜购买金额≤200",
    data3: "2253",
  },
  {
    data1: "普通用户",
    data2: "200＜购买金额≤500",
    data3: "1077",
  },
  { data1: "会员用户", data2: "500＜购买金额", data3: "493" },
]);
const step4DataTable2 = ref([
  {
    id: "过去30天平均DAU/MAU",
  },
  {
    id: "月平均活跃天数（天）",
  },
]);
const step5Data = ref([
  {
    data1: "5364",
    data2: "12526",
    data3: "6267",
    data4: "1.17",
  },
]);
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日",
  },
]);
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 = () => {
  var chartDom = document.getElementById("echarts1");
  var myChart = echarts.init(chartDom, "dark");
  var option;

  option = {
    title: {
      text: "推广渠道对比(获客人数)",
      left: "center",
      top: "10px",
      textStyle: {
        color: "#fff",
        // fontSize:16
      },
    },
    xAxis: {
      type: "category",
      data: ["基础线上工作", "手机厂商预装", "新媒体推广", "线下活动推广"],
      axisLabel: {
        textStyle: {
          color: "#fff", //坐标值得具体的颜色
        },
      },
      axisLine: {},
    },
    yAxis: {
      type: "value",
      name: "获取新客数量",
      axisLabel: {
        textStyle: {
          color: "#fff", //坐标值得具体的颜色
        },
      },
    },
    series: [
      {
        data: [900, 1000, 1800, 2600],
        type: "bar",
        // itemStyle:{
        //     color:'#00B6F5'
        // }
      },
    ],
  };

  option && myChart.setOption(option);
};
const drawLineEchart = () => {
  var chartDom = document.getElementById("echartsLine");
  var myChart = echarts.init(chartDom, "dark");
  var option;

  option = {
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "2020-01",
        "2020-02",
        "2020-03",
        "2020-04",
        "2020-05",
        "2020-06",
        "2020-07",
        "2020-08",
        "2020-09",
        "2020-10",
      ],
      axisLabel: {
        textStyle: {
          color: "#fff", //坐标值得具体的颜色
        },
      },
    },
    yAxis: {
      type: "value",
      name: "激活率",
      axisLabel: {
        formatter: "{value}%", // 在这里添加单位
        textStyle: {
          color: "#fff", //坐标值得具体的颜色
        },
      },
    },
    tooltip: {
      //   trigger: "axis",
      formatter: "注册日期：{b}<br />激活率：{c}%",
    },
    series: [
      {
        data: [81.9, 83.78, 79.39, 77.29, 78.25, 73.43, 80, 84.9, 84.48, 58.33],
        label: {
          formatter: "{c}%",
          show: true,
          position: "top",
        },
        type: "line",
        lineStyle: {
          color: "#AACC63",
        },
        itemStyle: {
          color: "#AACC63",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00751C", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#002652", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
const step1Submit = () => {
  step1Error.value = 0;
  if (step1Params1.value == "" || step1Params2.value == "") {
    proxy.$modal.msgError("请先完成所有填空");
    return;
  }
  if (step1Params1.value != "线下活动推广") {
    step1Error.value++;
  }
  if (step1Params2.value != "线下活动推广") {
    step1Error.value++;
  }
  //   console.log(666);
  console.log(step1Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step1AnswerFlag.value = true;
};
const step2Submit = () => {
  step2Error.value = 0;
  if (step2Params1.value == "" || step2Params2.value == "") {
    proxy.$modal.msgError("请先完成所有填空");
    return;
  }
  if (step2Params1.value != "80%") {
    step2Error.value++;
  }
  if (step2Params2.value != "2020-10") {
    step2Error.value++;
  }
  console.log(step2Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step2AnswerFlag.value = true;
};
const step3Submit = () => {
  step3Error.value = 0;
  if (step3Params1.value == "" || step3Params2.value == "") {
    proxy.$modal.msgError("请先完成所有填空");
    return;
  }
  if (step3Params1.value != "13.25%") {
    step3Error.value++;
  }
  if (step3Params2.value != "两周") {
    step3Error.value++;
  }
  console.log(step3Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step3AnswerFlag.value = true;
};
const step4Submit = () => {
  step4Error.value = 0;
  if (
    step4Params1.value == "" ||
    step4Params2.value == "" ||
    step4Params3.value == "" ||
    step4Params4.value == ""
  ) {
    proxy.$modal.msgError("请先完成所有填空");
    return;
  }
  if (step4Params1.value != "58.9%") {
    step4Error.value++;
  }
  if (step4Params2.value != "28.2%") {
    step4Error.value++;
  }
  if (step4Params3.value != "12.9%") {
    step4Error.value++;
  }
  if (step4Params4.value != "会员用户") {
    step4Error.value++;
  }
  console.log(step4Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
};
const step5Submit = () => {
  step5Error.value = 0;
  if (step5Params.value == "") {
    proxy.$modal.msgError("请先完成所有填空");
    return;
  }
  if (step5Params.value != "1.17") {
    step5Error.value++;
  }
  console.log(step5Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step5AnswerFlag.value = true;
};
const saveData = () => {
  const params = {
    stepFiveA: step1Params1.value,
    stepFiveB: step1Params2.value,
    stepFiveC: step2Params1.value,
    stepFiveD: step2Params2.value,
    stepSixA: step3Params1.value,
    stepSixB: step3Params2.value,
    stepSixC: step4Params1.value,
    stepSixD: step4Params2.value,
    stepSevenA: step4Params3.value,
    stepSevenB: step4Params4.value,
    stepSevenC: step5Params.value,
    // 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,
  };
  portraitModel
    .saveData({
      userId: 492,
      module: "AARRR用户运营分析",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};
const getData = () => {
  portraitModel
    .getData({
      userId: 492,
      module: "AARRR用户运营分析",
    })
    .then((res) => {
      step1Params1.value = res.data.stepFiveA;
      step1Params2.value = res.data.stepFiveB;
      step2Params1.value = res.data.stepFiveC;
      step2Params2.value = res.data.stepFiveD;
      step3Params1.value = res.data.stepSixA;
      step3Params2.value = res.data.stepSixB;
      step4Params1.value = res.data.stepSixC;
      step4Params2.value = res.data.stepSixD;
      step4Params3.value = res.data.stepSevenA;
      step4Params4.value = res.data.stepSevenB;
      step5Params.value = 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;
    })
    .catch((error) => {});
};
const submitData = () => {
  if (
    !step1AnswerFlag.value ||
    !step2AnswerFlag.value ||
    !step3AnswerFlag.value ||
    !step4AnswerFlag.value ||
    !step5AnswerFlag.value
  ) {
    proxy.$modal.msgError("请先完成所有步骤！");
    return;
  }
  errorNum.value =
    step1Error.value +
    step2Error.value +
    step3Error.value +
    step4Error.value +
    step5Error.value;
  console.log(errorNum.value, "总错误次数");
  portraitModel
    .submit({
      userId: 492,
      taskName: "AARRR用户运营分析",
      numberOfErrors: errorNum.value,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
    })
    .catch((error) => {});
};
const retrain = () => {
  portraitModel
    .retrain({
      userId: 492,
      module: "AARRR用户运营分析",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");
      step1Params1.value = "";
      step1Params2.value = "";
      step2Params1.value = "";
      step2Params2.value = "";
      step3Params1.value = "";
      step3Params2.value = "";
      step4Params1.value = "";
      step4Params2.value = "";
      step4Params3.value = "";
      step4Params4.value = "";
      step5Params.value = "";
    })
    .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  background: rgba(0, 29, 64, 0.5);
  border: 1px solid #0452c6;
  padding: 10px;
  //   opacity: 0.5;
  a:hover {
    text-decoration: underline;
  }
  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 180px;
    height: 56px;
    background-image: url("@/assets/images/01.png");
    background-size: 180px 56px;
    text-align: center;
    align-items: center;
    line-height: 56px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 15px;
    }
  }
  .caseBack {
    .conclusion {
      margin-top: 20px;
      padding: 10px;
      width: 577px;
      height: 70px;
      background: #005b55;
      border-radius: 10px;
      color: #28d298;
    }
    .step1Table {
      width: 588px;
      height: 313px;
      background: #002652;
      border: 1px solid #7995e8;
      margin-left: 20px;
      margin-top: 35px;
      text-align: center;
      padding-top: 10px;
      .titleTable {
        color: #fff;
        // margin:0 auto
      }
    }
    .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");
    }
    .analysisBtn {
      width: 89px;
      height: 31px;
      background: url("@/assets/images/分析.png");
      color: #000;
      line-height: 31px;
      text-align: center;
      font-size: 14px;
      padding-left: 10px;
      margin-left: 20px;
    }
    .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: 145px;
    height: 31px;
    background: url("@/assets/images/绘制.png");
    background-size: 145px 31px;
    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-textarea__inner {
  background: #002652;
  color: #fff;
  // color: #5397C3;
}
</style>