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://blog.csdn.net/kevin1993best/article/details/106329573"
        target="_blank"
        rel="noopener noreferrer"
      >
        https://blog.csdn.net/kevin1993best/article/details/106329573</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>
            <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="analysisConclusion"
              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
              :rows="12"
              type="textarea"
              placeholder="请输入"
            />
            <div class="submit">提交</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>
              </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
                >%
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input
              v-model="analysisConclusion"
              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
              :rows="8"
              type="textarea"
              placeholder="请输入"
            />
            <div class="submit">提交</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>
              </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
                >%
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input
              v-model="analysisConclusion"
              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
              :rows="8"
              type="textarea"
              placeholder="请输入"
            />
            <div class="submit">提交</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>
              </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>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 650px">
            <div class="analysisConclusion">分析结论</div>
            <el-input
              v-model="analysisConclusion"
              style="margin-left: 20px; margin-top: 20px; margin-bottom: 20px"
              :rows="8"
              type="textarea"
              placeholder="请输入"
            />
            <div class="submit">提交</div>
          </div>
        </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 analysisConclusion = 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([
  {
    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 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);
};
</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;
  }
  .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>