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

<template>
  <div class="content">
    <div class="import" @click="dialogVisible = true">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <!-- <div v-if="knowledgeFlag" v-html="knowledgeHtml"></div> -->
    <div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/caseIcon.png" alt="" />
          <span>案例背景：</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，在做商品推荐和货架摆放布局时候，将关联度高的商品放一起捆绑销售，从而提升销售额。
          <br />
          现有某购物商场的购物篮数据，请分析两两搭配销售的价值。A、B、C、D分别代表不同的商品
        </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/订单ID" align="center" prop="id"></el-table-column>
            <el-table-column label="商品1" align="center" prop="goods1"></el-table-column>
            <el-table-column label="商品2" align="center" prop="goods2"></el-table-column>
            <el-table-column label="商品3" align="center" prop="goods3"></el-table-column>
          </el-table>
          <div class="download" @click="downloadData">下载数据</div>
        </div>
        <p style="line-height: 25px; font-size: 14px">
          计算公式如下：
          <br />
          1.支持度是指A和B两个商品同时被购买的概率，AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%=P(A∩B)
          <br />
          2.置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比，A对B的置信度=P(A∩B)/P(A)
          <br />
          3.提升度是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B产品的可能性之比（置信度/无条件概率），A对B的提升度=A对B的置信度/P(B）。
          <br />
          一般而言，提升度如果小于1，则该推荐规则不应该被使用。
        </p>
      </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">
          根据购物篮A、B、C、D四种不同的商品，按照两两搭配的方式，可能有以下几种组合。
          <br />
          请按照A、B、C、D顺序依次两两组合：
        </span>
        <div style="margin-top: 10px; display: flex">
          <div style="display: flex">
            <div>
              <el-select v-model="combinationValue1" placeholder="请选择" style="width: 95px" size="small">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
                <el-option label="D" value="D" />
              </el-select>
              —
              <el-select v-model="combinationValue2" placeholder="请选择" style="width: 95px" size="small">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
                <el-option label="D" value="D" />
              </el-select>
            </div>
            <div style="display: flex; align-items: start">
              <el-button class="addBtn" @click="addCombination">添加组合</el-button>
              <img src="@/assets/images/箭头.png" alt="" />
              <div class="comList">
                <ul>
                  <p style="color: #fff">商品组合</p>
                  <li v-for="(item, index) in list" :key="index">
                    <span>{{ item }}</span>
                    <span v-if="item" style="float: right; margin-right: 5px; cursor: pointer" @click="deleteItem(index)">-</span>
                  </li>
                </ul>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="comListError" style="color: red">X</span>
                  <span v-if="!comListError" style="color: #00bb00">√</span>
                </div>
              </div>
            </div>
          </div>

          <div class="submit" @click="step1Submit">提交</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第二步，计算无条件概率</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">根据购物篮信息，计算A、B、C、D四种商品的无条件概率。</span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step2Data"
            style="width: 350px"
            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="概率（100%）" align="center" prop="amount">
              <template #default="scope">
                <el-input v-model="scope.row.params" placeholder="请输入" style="width: 70px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError" style="color: red">X</span>
                  <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step2Submit">提交</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 />
          计算结果保留小数点后两位小数。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step3Data"
            style="width: 650px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="商品组合" align="center" prop="data1"></el-table-column>
            <el-table-column label="支持度" align="center" prop="amount">
              <template #default="scope">
                <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 70px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError1" style="color: red">X</span>
                  <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="置信度" align="center" prop="amount">
              <template #default="scope">
                <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 70px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError2" style="color: red">X</span>
                  <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="提示度" align="center" prop="amount">
              <template #default="scope">
                <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 70px"></el-input>
                %
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError3" style="color: red">X</span>
                  <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step3Submit">提交</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">
          当A对B的提升度＞1，则表示买A再买B的概率大于本身买B的概率，就表示买A对买B带来了提升效果。
          <br />
          当A对B的提升度＜1，则表示买A再买B的概率小于本身买B的概率，就表示买A对买B带来了负向效果。
          <br />
          当A对B的提升度 = 1，则代表买A对买B没有影响。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step4Data"
            style="width: 350px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="商品组合" align="center" prop="data1" width="120"></el-table-column>
            <el-table-column label="支持度" align="center" prop="amount">
              <template #default="scope">
                <el-select v-model="scope.row.params" placeholder="请选择" style="width: 95px" size="small">
                  <el-option label="提升效果" value="提升效果" />
                  <el-option label="负向效果" value="负向效果" />
                  <el-option label="没有影响" value="没有影响" />
                </el-select>
                <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                  <span v-if="scope.row.isError" style="color: red">X</span>
                  <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step4Submit">提交</div>
        </div>
        <p style="line-height: 25px; font-size: 14px">进一步的分析，可以分析支持度最高top10的商品组合、置信度最高top10的商品组合、提升度最高top10的商品组合。</p>
      </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 class="customerType" style="width: 887px">
          <img src="@/assets/images/促销.png" alt="" />
          <span>优化商品配置：可以厘清哪些商品可以一起购买,关联商品可以优化陈列方式、进行促销等;</span>
        </div>
        <div class="customerType" style="width: 887px">
          <img src="@/assets/images/需求.png" alt="" />
          <span>了解客户需求：分析出顾客的购买习惯，顾客购买商品的时间、地点等;</span>
        </div>
        <div class="customerType" style="width: 887px">
          <img src="@/assets/images/趋势.png" alt="" />
          <span>分析销售趋势：利用数据仓库对品种和库存的趋势进行分析,选定需要补充的商品,研究顾客购买趋势,分析季节性购买模式,确定降价商品。</span>
        </div>
      </div>
    </div>
    <pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
      <template v-slot:content>
        <div v-html="knowledgeHtml"></div>
      </template>
    </pop-modal>
  </div>
</template>

<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import * as echarts from "echarts";
import { downBlobFile } from "@/utils/index.js";
import { onBeforeUnmount, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const showAnswerFlag = ref(false);
const comListError = ref(false);
const knowledgeHtml = ref(
  `<p style="text-align: left;">一、理解购物篮分析</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，从而发现潜在的消费行为和需求，为电商平台提供决策支持。通过购物篮分析，电商平台可以更好地理解用户的购物习惯和偏好，从而为用户提供更加精准的推荐和产品布局。</span></p><p>购物篮分析的关键衡量指标有三个：支持度、置信度、提升度</p><p>为了更好地解释这三个指标，这里我先跟大家举个例子，后续就用这个例子说明。</p><p>某超市30天订单数一共10000单，其中包含A商品的订单有600单，包含B商品的订单有400单，同时包含A和B两种商品的订单有300单。</p><p>购买A商品的概率 P(A)=(600/10000)*100%=6%</p><p>购买B商品的概率 P(B)=(400/10000)*100%=4%</p><p>同时购买A商品和B商品的概率 P(A∩B)=(300/10000)*100%=3%</p><p style="text-align: left;">1.支持度</p><p style="text-align: left;">支持度是指A和B两个商品同时被购买的概率，代表了这个组合的可靠程度。</p><p style="text-align: left;">AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%</p><p style="text-align: left;">在本例中,AB组合的支持度=P(A∩B)=(300/10000) *100%=3%</p><p style="text-align: left;">2.置信度</p><p style="text-align: left;">置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比。代表买了A的用户有多大概率会再买B，既买A产品对B产品产生了多大的影响。</p><p style="text-align: left;">A对B的置信度=同时包含A和B商品的订单数/包含A商品的订单数*100%</p><p style="text-align: left;">在本例中，A对B的置信度=P(A∩B)/P(A)=(300/600)*100%=50%</p><p style="text-align: left;">3.提升度</p><p style="text-align: left;">A对B提升度=A对B的置信度/P(B)，是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B 产品的可能性之比。</p><p style="text-align: left;">它的计算方法是：A对B的置信度/P(B)。提升度和置信度一样，也是一个条件概率。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度&gt;P(B)时,A对B的提升度&gt;1，则表示买A再买B的概率大于本身买B的概率,就表示买A对买B带来了提升效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度＜P(B)时,A对B的提升度&lt;1，则表示买A再买B的概率小于本身买B的概率,就表示买A对买B带来了负向效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度等于P(B)时,A对B的提升度=1，则代表买A对买B没有影响。</p><p style="text-align: left;">在本例中，A对B的提升度=A对B的置信度/P(B)=50%/4%=12.5，表示商品A对商品B有较大的提升，有较大的搭配价值，建议搭配。</p><p style="text-align: left;">二、利用购物篮分析优化产品推荐</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 推荐算法优化：根据用户的历史购物数据，结合用户画像和行为数据，制定更加精准的推荐算法。通过分析用户的购买行为，了解他们的购物习惯和偏好，为不同的用户提供个性化的推荐。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 动态推荐：根据用户在购物过程中的实时行为，实时调整推荐结果，确保推荐内容与用户需求高度匹配。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 推荐内容丰富度：除了商品推荐外，还可以考虑推荐相关服务、优惠券、套餐等，增加用户购物的丰富度和满意度。</span></p><p style="text-align: left;">三、利用购物篮分析优化产品布局</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 商品分类优化：根据用户的购物
);
const list = ref([]);
const combinationValue1 = ref("");
const combinationValue2 = ref("");
const dialogVisible = ref(false);
const knowledgeFlag = ref(false);
const combinationRight = ref(["A—B", "A—C", "A—D", "B—C", "B—D", "C—D"]);
const step1Data = ref([
  {
    name: "A",
    amount: "2300",
  },
  {
    name: "B",
    amount: "2300",
  },
  {
    name: "C",
    amount: "2300",
  },
  {
    name: "D",
    amount: "2300",
  },
]);
const fileTable1 = ref([
  {
    id: "1",
    goods1: "A",
    goods2: "B",
    goods3: "C",
  },
  {
    id: "2",
    goods1: "A",
    goods2: "C",
    goods3: "D",
  },
  {
    id: "3",
    goods1: "B",
    goods2: "C",
    goods3: "",
  },
  {
    id: "4",
    goods1: "A",
    goods2: "B",
    goods3: "D",
  },
  {
    id: "5",
    goods1: "C",
    goods2: "D",
    goods3: "",
  },
]);
const step2Data = ref([
  {
    name: "P（A）",
    amount: "3",
    account: "800",
  },
  { name: "P（B）", amount: "4", account: "1200" },
  { name: "P（C）", amount: "6", account: "600" },
  { name: "P（D）", amount: "7", account: "1400" },
]);
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([
  {
    data1: "A—B",
    data2: "5900",
  },
  {
    data1: "A—C",
    data2: "2400",
  },
  {
    data1: "A—D",
  },
  {
    data1: "B—C",
    data2: "600",
  },
  {
    data1: "B—D",
    data2: "600",
  },
  {
    data1: "C—D",
    data2: "600",
  },
]);
const step5Data = ref([
  {
    title: "平均值",
  },
]);
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 step1Error = ref(0);
const step2Error = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false);
const step4AnswerFlag = ref(false);
const errorNum = ref(0);
onMounted(() => {
  getData();
});
onBeforeUnmount(() => {
  saveData();
});
const deleteItem = (index) => {
  list.value.splice(index, 1);
};
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 step1Submit = () => {
  step1Error.value = 0;
  // console.log(isArrayContained(list.value, combinationRight.value)); // 输出：true
  if (!isArrayContained(list.value, combinationRight.value)) {
    step1Error.value = 1;
    comListError.value = true;
  } else {
    comListError.value = false;
  }
  console.log("错误数", step1Error.value);
  proxy.$modal.msgSuccess("提交成功");
  step1AnswerFlag.value = true;
};
function isArrayContained(arr1, arr2) {
  return arr2.every((element) => arr1.includes(element));
}
const step2Submit = () => {
  // console.log(0);
  step2Error.value = 0;
  for (let i in step2Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step2Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step2Data.value[0].params && step2Data.value[0].params !== "60") {
    step2Error.value++;
    step2Data.value[0].isError = true;
  } else {
    step2Data.value[0].isError = false;
  }
  if (step2Data.value[1].params && step2Data.value[1].params !== "60") {
    step2Error.value++;
    step2Data.value[1].isError = true;
  } else {
    step2Data.value[1].isError = false;
  }
  if (step2Data.value[2].params && step2Data.value[2].params !== "80") {
    step2Error.value++;
    step2Data.value[2].isError = true;
  } else {
    step2Data.value[2].isError = false;
  }
  if (step2Data.value[3].params && step2Data.value[3].params !== "60") {
    step2Error.value++;
    step2Data.value[3].isError = true;
  } else {
    step2Data.value[3].isError = false;
  }
  console.log(step2Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step2AnswerFlag.value = true;
};
const step3Submit = () => {
  step3Error.value = 0;
  for (let i in step3Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step3Data.value[i].params1 || !step3Data.value[i].params2 || !step3Data.value[i].params3) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "40" && step3Data.value[0].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[0].isError1 = true;
  } else {
    step3Data.value[0].isError1 = false;
  }
  if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "66.67") {
    step3Error.value++;
    step3Data.value[0].isError2 = true;
  } else {
    step3Data.value[0].isError2 = false;
  }
  if (step3Data.value[0].params3 && step3Data.value[0].params3 !== "111.11") {
    step3Error.value++;
    step3Data.value[0].isError3 = true;
  } else {
    step3Data.value[0].isError3 = false;
  }
  if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "20" && step3Data.value[1].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[1].isError1 = true;
  } else {
    step3Data.value[1].isError1 = false;
  }
  if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[1].isError2 = true;
  } else {
    step3Data.value[1].isError2 = false;
  }
  if (step3Data.value[1].params3 && step3Data.value[1].params3 !== "41.67") {
    step3Error.value++;
    step3Data.value[1].isError3 = true;
  } else {
    step3Data.value[1].isError3 = false;
  }
  if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "40" && step3Data.value[2].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[2].isError1 = true;
  } else {
    step3Data.value[2].isError1 = false;
  }
  if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "60.00" && step3Data.value[2].params2 !== "60") {
    step3Error.value++;
    step3Data.value[2].isError2 = true;
  } else {
    step3Data.value[2].isError2 = false;
  }
  if (step3Data.value[2].params3 && step3Data.value[2].params3 !== "100.00" && step3Data.value[2].params3 !== "100") {
    step3Error.value++;
    step3Data.value[2].isError3 = true;
  } else {
    step3Data.value[2].isError3 = false;
  }
  if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "20" && step3Data.value[3].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[3].isError1 = true;
  } else {
    step3Data.value[3].isError1 = false;
  }
  if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[3].isError2 = true;
  } else {
    step3Data.value[3].isError2 = false;
  }
  if (step3Data.value[3].params3 && step3Data.value[3].params3 !== "41.67") {
    step3Error.value++;
    step3Data.value[3].isError3 = true;
  } else {
    step3Data.value[3].isError3 = false;
  }
  if (step3Data.value[4].params1 && step3Data.value[4].params1 !== "20" && step3Data.value[4].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[4].isError1 = true;
  } else {
    step3Data.value[4].isError1 = false;
  }
  if (step3Data.value[4].params2 && step3Data.value[4].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[4].isError2 = true;
  } else {
    step3Data.value[4].isError2 = false;
  }
  if (step3Data.value[4].params3 && step3Data.value[4].params3 !== "55.56") {
    step3Error.value++;
    step3Data.value[4].isError3 = true;
  } else {
    step3Data.value[4].isError3 = false;
  }
  if (step3Data.value[5].params1 && step3Data.value[5].params1 !== "40" && step3Data.value[5].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[5].isError1 = true;
  } else {
    step3Data.value[5].isError1 = false;
  }
  if (step3Data.value[5].params2 && step3Data.value[5].params2 !== "50.00" && step3Data.value[5].params2 !== "50") {
    step3Error.value++;
    step3Data.value[5].isError2 = true;
  } else {
    step3Data.value[5].isError2 = false;
  }
  if (step3Data.value[5].params3 && step3Data.value[5].params3 !== "83.33") {
    step3Error.value++;
    step3Data.value[5].isError3 = true;
  } else {
    step3Data.value[5].isError3 = false;
  }
  console.log(step3Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step3AnswerFlag.value = true;
  // console.log(999);
};
const step4Submit = () => {
  step4Error.value = 0;
  for (let i in step4Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step4Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step4Data.value[0].params && step4Data.value[0].params !== "提升效果") {
    step4Error.value++;
    step4Data.value[0].isError = true;
  } else {
    step4Data.value[0].isError = false;
  }
  if (step4Data.value[1].params && step4Data.value[1].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[1].isError = true;
  } else {
    step4Data.value[1].isError = false;
  }
  if (step4Data.value[2].params && step4Data.value[2].params !== "没有影响") {
    step4Error.value++;
    step4Data.value[2].isError = true;
  } else {
    step4Data.value[2].isError = false;
  }
  if (step4Data.value[3].params && step4Data.value[3].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[3].isError = true;
  } else {
    step4Data.value[3].isError = false;
  }
  if (step4Data.value[4].params && step4Data.value[4].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[4].isError = true;
  } else {
    step4Data.value[4].isError = false;
  }
  if (step4Data.value[5].params && step4Data.value[5].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[5].isError = true;
  }else{
    step4Data.value[5].isError = false;
  }
  // console.log(666);
  console.log(step4Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
};
const saveData = () => {
  const params = {
    stepFiveA: list.value.join(","),
    stepFiveB: step2Data.value[0].params,
    stepFiveC: step2Data.value[1].params,
    stepFiveD: step2Data.value[2].params,
    stepSixA: step2Data.value[3].params,
    stepSixB: step3Data.value[0].params1,
    stepSixC: step3Data.value[0].params2,
    stepSixD: step3Data.value[0].params3,
    stepSevenA: step3Data.value[1].params1,
    stepSevenB: step3Data.value[1].params2,
    stepSevenC: step3Data.value[1].params3,
    stepSevenD: step3Data.value[2].params1,
    stepEightA: step3Data.value[2].params2,
    stepEightB: step3Data.value[2].params3,
    stepEightC: step3Data.value[3].params1,
    stepEightD: step3Data.value[3].params2,
    stepNineA: step3Data.value[3].params3,
    stepNineB: step3Data.value[4].params1,
    stepNineC: step3Data.value[4].params2,
    stepNineD: step3Data.value[4].params3,
    stepTenA: step3Data.value[5].params1,
    stepTenB: step3Data.value[5].params2,
    stepTenC: step3Data.value[5].params3,
    stepTenD: step4Data.value[0].params,
    stepElevenA: step4Data.value[1].params,
    stepOneA: step4Data.value[2].params,
    stepOneB: step4Data.value[3].params,
    stepOneC: step4Data.value[4].params,
    stepOneD: step4Data.value[5].params,
    // stepTwoA: step6Data.value[0].params2,
    // stepTwoB: step6Data.value[0].params3,
    // stepTwoC: step6Data.value[1].params1,
    // stepThreeA: step6Data.value[1].params2,
    // stepThreeB: step6Data.value[1].params3,
    // stepThreeC: step6Data.value[2].params1,
    // stepThreeD: step6Data.value[2].params2,
    // stepFourA: step6Data.value[2].params3,
    // stepFourB: step7Data.value[0].params,
    // stepFourC: step7Data.value[1].params,
    // stepFourD: step7Data.value[2].params,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "购物篮分析",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};
const getData = () => {
  portraitModel
    .getData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "购物篮分析",
    })
    .then((res) => {
      if (res.data.stepFiveA) {
        list.value = res.data.stepFiveA.split(",");
      }

      step2Data.value[0].params = res.data.stepFiveB;
      step2Data.value[1].params = res.data.stepFiveC;
      step2Data.value[2].params = res.data.stepFiveD;
      step2Data.value[3].params = res.data.stepSixA;
      step3Data.value[0].params1 = res.data.stepSixB;
      step3Data.value[0].params2 = res.data.stepSixC;
      step3Data.value[0].params3 = res.data.stepSixD;
      step3Data.value[1].params1 = res.data.stepSevenA;
      step3Data.value[1].params2 = res.data.stepSevenB;
      step3Data.value[1].params3 = res.data.stepSevenC;
      step3Data.value[2].params1 = res.data.stepSevenD;
      step3Data.value[2].params2 = res.data.stepEightA;
      step3Data.value[2].params3 = res.data.stepEightB;
      step3Data.value[3].params1 = res.data.stepEightC;
      step3Data.value[3].params2 = res.data.stepEightD;
      step3Data.value[3].params3 = res.data.stepNineA;
      step3Data.value[4].params1 = res.data.stepNineB;
      step3Data.value[4].params2 = res.data.stepNineC;
      step3Data.value[4].params3 = res.data.stepNineD;
      step3Data.value[5].params1 = res.data.stepTenA;
      step3Data.value[5].params2 = res.data.stepTenB;
      step3Data.value[5].params3 = res.data.stepTenC;
      step4Data.value[0].params = res.data.stepTenD;
      step4Data.value[1].params = res.data.stepElevenA;
      step4Data.value[2].params = res.data.stepOneA;
      step4Data.value[3].params = res.data.stepOneB;
      step4Data.value[4].params = res.data.stepOneC;
      step4Data.value[5].params = res.data.stepOneD;
      // step6Data.value[0].params2 = res.data.stepTwoA;
      // step6Data.value[0].params3 = res.data.stepTwoB;
      // step6Data.value[1].params1 = res.data.stepTwoC;
      // step6Data.value[1].params2 = res.data.stepThreeA;
      // step6Data.value[1].params3 = res.data.stepThreeB;
      // step6Data.value[2].params1 = res.data.stepThreeC;
      // step6Data.value[2].params2 = res.data.stepThreeD;
      // step6Data.value[2].params3 = res.data.stepFourA;
      // step7Data.value[0].params = res.data.stepFourB;
      // step7Data.value[1].params = res.data.stepFourC;
      // step7Data.value[2].params = res.data.stepFourD;
      // console.log(list.value);
    })
    .catch((error) => {});
};
const downloadData = () => {
  // portraitModel
  //   .downloadDataByBasket({})
  //   .then((res) => {
  //     // console.log(res,'--');
  //     const blob = new Blob([res], { type: "application/vnd.ms-excel" });
  //     downBlobFile(`案例数据-购物篮分析`, blob);
  //   })
  //   .catch((error) => {});
  window.open(baseUrl + "/api/downDataByUserPortrait/analysisByShopBasket");
};
const submitData = () => {
  // console.log("asdasdasdsdsds");
  if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
    proxy.$modal.msgError("请先完成所有步骤！");
    return;
  }
  errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value;
  console.log(errorNum.value, "总错误次数");
  portraitModel
    .submit({
      userId: JSON.parse(getUserInfo()).userId,
      taskName: "购物篮分析",
      numberOfErrors: errorNum.value,
      subState: 1,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
      showAnswerFlag.value = true;
    })
    .catch((error) => {});
};
const retrain = () => {
  // console.log(66);
  portraitModel
    .retrain({
      userId: JSON.parse(getUserInfo()).userId,
      module: "购物篮分析",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");
      list.value = ["-"];
      for (let i in step2Data.value) {
        step2Data.value[i].params = "";
      }
      for (let i in step3Data.value) {
        step3Data.value[i].params1 = "";
        step3Data.value[i].params2 = "";
        step3Data.value[i].params3 = "";
      }
      for (let i in step4Data.value) {
        step4Data.value[i].params = "";
      }
      // step2Select1.value = "";
      // step2Select2.value = "";
      // step2Select3.value = "";
      // step2Select4.value = "";
      // step2Select5.value = "";
      // step3Select1.value = "";
      // step3Select2.value = "";
    })
    .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
</script>

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

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 150px;
    height: 50px;
    background-image: url("@/assets/images/taskImport.png");
    background-size: 150px 50px;
    text-align: center;
    align-items: center;
    line-height: 50px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 8px;
    }
  }
  .caseBack {
    color: #000;
    .title {
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 89px;
      height: 31px;
      background: url("@/assets/images/downloadIcon.png");
    }
    .submit {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: 14px;
      text-align: center;
      line-height: 31px;
      width: 99px;
      height: 31px;
      background: url("@/assets/images/提交任务.png");
    }
    .customerType {
      padding-left: 10px;
      display: flex;
      align-items: center;
      width: 945px;
      height: 26px;
      // background: #003b75;
      background: #fff8ee;
      border-radius: 10px;
      // border: 1px solid #0052a3;
      font-size: 12px;
      margin-top: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .addBtn {
    background-color: #6af5fb;
    color: #080138;
    height: 31px;
    border: 1px solid #6af5fb;
    margin-left: 10px;
  }
  .comList {
    display: flex;
    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;
        background: #fff;
        border-bottom: 1px solid #7190d4;
        font-size: 14px;
      }
    }
  }
}
// ::v-deep .el-table tr {
//   background-color: #002652 !important;
//   color: #fff;
// }
::v-deep .el-table tr {
  background-color: #fff !important;
  color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa !important;
}
::v-deep .el-table td {
  padding-top: 4px;
  padding-bottom: 4px;
}
</style>