dianshang-qianduan/src/views/portraitModel/components/viscosityAnalysis.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://zhuanlan.zhihu.com/p/400319684"
        target="_blank"
        rel="noopener noreferrer"
        >https://zhuanlan.zhihu.com/p/400319684</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">
          用户粘性分析是一种衡量用户对产品或服务的忠诚度和黏性程度的分析方法。它帮助企业了解用户的行为习惯、使用频率和留存率，以评估用户对产品或服务的依赖程度和忠诚度。用户粘性分析模型通常包括以下指标：活跃用户数、留存率、使用频率、用户转化率、用户流失率。<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: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="用户ID" align="center" prop="date">
            </el-table-column>
            <el-table-column label="登录时间" align="center" prop="addNum">
            </el-table-column>
            <el-table-column
              label="登录时长（分钟）"
              align="center"
              prop="day2"
            >
            </el-table-column>
          </el-table>
          <div class="download">下载数据</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第一步，日活跃用户分析</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          日活跃用户（DAU）：每天使用产品或服务的独立用户数量。这个指标可以反映产品的日常使用情况。分析近一个月日活跃用户变动情况，包括变动率。这个时候统计活跃用户需要进行去重，一天活跃多次的只保留一条记录。<br>
          日活跃率 = 去重后的日活跃用户数量 / 历史累计去重后的用户数量*100% <br>
          日活跃平均时长=登录时长/活跃用户数，计算结果保留小数点后两位 <br>
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step1Data"
            style="width: 550px"
            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>
              </template>
            </el-table-column>
            <el-table-column label="日活跃率（%）" align="center" prop="day2">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 90px"
                   size="small"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="日活跃平均时长（分钟）" align="center" prop="day3">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params3"
                  placeholder="请输入"
                  style="width: 90px"
                   size="small"
                >
                </el-input>
              </template>
            </el-table-column>

    
          </el-table>
          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第二步，留存分析常用口径计算</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          从时间维度划分，常见的的有：次日留存、3日留存、7日留存、14日留存、30日留存、60日留存。<br />
          从用户维度划分，常见的的有：新用户留存、活跃留存。<br />
          请按照第一步计算的表格数据，计算次日留存、3日留存、7日留存、14日留存的平均数，计算结果保留小数点后0位。
        </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="name">
            </el-table-column>
            <el-table-column label="次日" align="center" prop="description">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="3日" align="center" prop="description">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="7日" align="center" prop="description">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params3"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="14日" align="center" prop="amount">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params4"
                  placeholder="请输入"
                  style="width: 70px"
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第三步，留存率可视化分析</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          以2021/8/1注册的新增的用户数据为例，绘制之后14日的留存率折线图：
        </span>
        <div class="draw" @click="draw">绘制</div>
        <div style="margin-top: 10px; display: flex">
          <div id="echarts" style="width: 400px; height: 300px"></div>
          <div style="margin-left: 50px">
            <p>通过图表分析，新增用户在哪天之后趋向于平稳</p>
            <el-select
              v-model="dayValue"
              placeholder="请选择"
              style="width: 120px"
              size="default"
              @change="handleChangeDay"
            >
              <el-option
                v-for="item in dayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="analysis">
              <div class="conclusion">分析结论：</div>
              <span>
                1、7日留存率，只有27%，流失率达到了73%，相对比较低，需要提供用户粘性；<br />
                2、平缓之后，能够留存下来的客户，是公司的忠诚用户；<br />
                3、14日的留存率，每天一直下降，需要找出原因。
              </span>
            </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">
          留存分析的适用场景：<br />
          日留存率: <br />
          快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。<br />
          快速判断用户粘性，比如用户是否更易受促销活动的影响等等。<br />
          周留存率: <br />
          判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。<br />
          分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。<br />
          月留存率：<br />
          评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。<br />
          平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step4Data"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="" align="center" prop="name">
            </el-table-column>
            <el-table-column label="次日" align="center" prop="data1">
            </el-table-column>
            <el-table-column label="3日" align="center" prop="data2">
            </el-table-column>
            <el-table-column label="7日" align="center" prop="data3">
            </el-table-column>
            <el-table-column label="14日" align="center" prop="data4">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第五步，留存分析应用场景</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          日常工作中，留存分析常用于下述场景：
        </span>
        <div style="font-size: 14px; margin-top: 10px">
          1. 了解一个渠道的质量<br />
          可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期），
          以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。
        </div>
        <div style="font-size: 14px; margin-top: 10px">
          2. 判断运营手段/某项功能改动是否奏效<br />
          当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。
          以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户，
          三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
        </div>
        <div style="font-size: 14px; margin-top: 10px">
          3. 衡量一个产品是否健康<br />
          可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。
        </div>
      </div>
      <div class="line"></div>
    </div>
  </div>
</template>

<script setup>
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 knowledgeFlag = 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([
  {
    date: "2021/8/1",
    addNum: "1668",
    day2: "1472",
    day3: "1214",
    day4: "1002",
    day5: "901",
    day6: "631",
    day7: "556",
    day8: "417",
    day9: "295",
    day10: "205",
    day11: "172",
    day12: "145",
    day13: "108",
    day14: "68",
  },
  {
    date: "2021/8/2",
    addNum: "1692",
    day2: "1435",
    day3: "1165",
    day4: "946",
    day5: "607",
    day6: "534",
    day7: "346",
    day8: "300",
    day9: "214",
    day10: "165",
    day11: "143",
    day12: "126",
    day13: "91",
    day14: "",
  },
  {
    date: "2021/8/3",
    addNum: "1669",
    day2: "1402",
    day3: "1232",
    day4: "1083",
    day5: "897",
    day6: "756",
    day7: "518",
    day8: "382",
    day9: "258",
    day10: "199",
    day11: "121",
    day12: "106",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/4",
    addNum: "1301",
    day2: "1077",
    day3: "883",
    day4: "724",
    day5: "651",
    day6: "494",
    day7: "299",
    day8: "230",
    day9: "155",
    day10: "133",
    day11: "91",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/5",
    addNum: "2049",
    day2: "1748",
    day3: "1515",
    day4: "1314",
    day5: "1046",
    day6: "831",
    day7: "658",
    day8: "498",
    day9: "442",
    day10: "189",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/6",
    addNum: "2670",
    day2: "2312",
    day3: "2039",
    day4: "1799",
    day5: "1290",
    day6: "922",
    day7: "828",
    day8: "543",
    day9: "373",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/7",
    addNum: "1999",
    day2: "1765",
    day3: "1573",
    day4: "1401",
    day5: "988",
    day6: "783",
    day7: "514",
    day8: "356",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/8",
    addNum: "2099",
    day2: "1874",
    day3: "1515",
    day4: "1224",
    day5: "765",
    day6: "578",
    day7: "402",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/9",
    addNum: "2509",
    day2: "2050",
    day3: "1808",
    day4: "1595",
    day5: "1370",
    day6: "752",
    day7: "",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/10",
    addNum: "1011",
    day2: "839",
    day3: "740",
    day4: "653",
    day5: "410",
    day6: "",
    day7: "",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/11",
    addNum: "2128",
    day2: "1894",
    day3: "1566",
    day4: "1214",
    day5: "",
    day6: "",
    day7: "",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/12",
    addNum: "1366",
    day2: "1145",
    day3: "983",
    day4: "",
    day5: "",
    day6: "",
    day7: "",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
  {
    date: "2021/8/13",
    addNum: "2971",
    day2: "2335",
    day3: "",
    day4: "",
    day5: "",
    day6: "",
    day7: "",
    day8: "",
    day9: "",
    day10: "",
    day11: "",
    day12: "",
    day13: "",
    day14: "",
  },
]);
const step2Data = ref([
  {
    name: "平均数",
  },
]);
const step3Data = ref([
  {
    data1: "A-B",
    data2: "5900",
  },
  {
    data1: "A-C",
    data2: "2400",
  },
  {
    data1: "A-D",
    data2: "1100",
  },

  {
    data1: "B-C",
    data2: "600",
  },
  {
    data1: "B-D",
    data2: "600",
  },
  {
    data1: "C-D",
    data2: "600",
  },
]);
const step4Data = ref([
  {
    name: "平均数",
    data1: "666",
    data2: "A",
    data3: "189",
    data4: "衬衫",
  },
]);
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 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);
};
</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 {
    .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;
  }
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
</style>