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

<template>
  <div class="content">
    <div class="import" @click="knowledgeFlag = !knowledgeFlag">
      <img src="@/assets/images/导入.png" alt="" />
      <span>任务知识导入</span>
    </div>
    <div v-if="knowledgeFlag">
      <p>
        帕累托分析法源于经典的二八法则。意大利经济学家维尔弗雷多·帕累托于1906年提出了著名的关于意大利社会财务分配的研究结论：20%的人口掌握了80%的社会财富。这个结论对大多数国家的社会财富分配情况都成立。因此帕累托法则又被称为80/20法则。<br /><br />
        帕累托分析的核心观点是：在许多情况下，大部分的问题、效益或成本都来自于少数的要素。换句话说，少数关键要素占据了绝大多数的结果。这一规律在许多领域都具有普适性，例如：<br /><br />
        在企业中，80%的利润可能来自于20%的产品或客户。<br />
        在销售中，80%的销售额可能来自于20%的销售员或产品。<br />
        在质量控制中，80%的缺陷可能来自于20%的原因或工序。<br /><br />
        ABC 分类法全称应为 ABC 分类库存控制法。
        又称帕累托分析法或巴雷托分析法、柏拉图分析、主次因分析法
        、ABC分析法、ABC 管理法，平常也称之为「80 对 20」规则。
      </p>
      <img src="@/assets/images/u3323.png" alt="" /><br />
      <img src="@/assets/images/u3324.png" alt="" />
    </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">
          现有以下某商店的交易原始数据，需要采用帕累托分析方法，对商品进行分类：
        </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="交易单号" align="center" prop="id">
            </el-table-column>
            <el-table-column label="商品名称" align="center" prop="name">
            </el-table-column>
            <el-table-column label="销售额" align="center" prop="amount">
            </el-table-column>
          </el-table>
          <div class="download" @click="downloadData">下载数据</div>
        </div>
      </div>
      <div class="line"></div>
      <div class="caseBack">
        <div class="title">
          <img src="@/assets/images/步骤.png" alt="" />
          <span>第一步，统计各类商品累计销售额</span>
        </div>
        <span style="line-height: 25px; font-size: 14px">
          以商品为统计单元，计算各类商品的销售额。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step1Data"
            style="width: 450px"
            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="amount">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params"
                  placeholder="请输入"
                  style="width: 130px"
                >
                </el-input>
              </template>
            </el-table-column>
          </el-table>
          <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">
          以累计销售额为排序基准，按照倒序进行排序。
        </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="amount">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <img
                    src="@/assets/images/上.png"
                    alt=""
                    style="margin-right: 10px; cursor: pointer"
                    @click="moveUp(scope.$index, scope.row)"
                  />
                  <img
                    src="@/assets/images/下.png"
                    alt=""
                    style="cursor: pointer"
                    @click="moveDown(scope.$index, scope.row)"
                  />
                </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">
          计算各个商品的销售额占比，并以此通过累加计算累计销售额占比。
        </span>
        <div style="margin-top: 10px; display: flex" v-if="step2AnswerFlag">
          <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="data2">
            </el-table-column>
            <el-table-column
              label="销售额占比（%）"
              align="center"
              prop="data3"
            >
              <template #default="scope">
                <el-input
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 110px"
                >
                </el-input
                >%
              </template>
            </el-table-column>
            <el-table-column
              label="累计销售额占比（%）"
              align="center"
              prop="data4"
            >
              <template #default="scope">
                <el-input
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 110px"
                >
                </el-input
                >%
              </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">
          我们按照0-80%，80%-90%，90%-100%将商品分成ABC3个类别，然后对于这3个类别的产品做区别管理，以提高效益。
        </span>
        <el-table
          :show-header="false"
          :data="typeData"
          style="width: 580px; margin-top: 10px"
          border
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column
            label="用户ID"
            align="center"
            prop="data1"
            width="160"
          >
          </el-table-column>
          <el-table-column label="用户名称" align="center" prop="data2">
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px; display: flex" v-if="step3AnswerFlag">
          <el-table
            :data="step4Data"
            style="width: 680px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="商品名称" align="center" prop="data1">
            </el-table-column>
            <el-table-column label="销售额" align="center" prop="data2">
            </el-table-column>
            <el-table-column
              label="累计销售额占比（%）"
              align="center"
              prop="data3"
            >
            </el-table-column>
            <el-table-column label="划分商品类型" align="center" prop="data4">
              <template #default="scope">
                <el-select
                  v-model="scope.row.params"
                  placeholder="请选择"
                  style="width: 100px"
                >
                  <el-option :label="'A类商品'" :value="'A类商品'" />
                  <el-option :label="'B类商品'" :value="'B类商品'" />
                  <el-option :label="'C类商品'" :value="'C类商品'" />
                </el-select>
              </template>
            </el-table-column>
          </el-table>
          <div class="submit" @click="step4Submit">提交</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">
          以分析表的商品名称为X轴，销售额为左侧Y轴，累计销售额占比为右侧Y轴绘制帕累托图。
        </span>
        <div style="margin-top: 10px; display: flex">
          <el-table
            :data="step5Data"
            style="width: 680px"
            border
            :header-cell-style="{
              color: '#fff',
              fontSize: '14px',
              backgroundColor: '#6A7DE9!important',
            }"
          >
            <el-table-column label="" align="center" prop="title" />
            <el-table-column label="R值打分" align="center">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params1"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="F值打分" align="center">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params2"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="M值打分" align="center">
              <template #default="scope">
                <el-input
                  v-model="scope.row.params3"
                  placeholder="请输入"
                  style="width: 100px"
                >
                </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">
          一般来说，在商品的库存管理策略中：
        </span>
        <div class="customerType" style="width: 1115px">
          <img src="@/assets/images/商品a.png" alt="" />
          <span
            >A类商品对公司销售额贡献最大，这种商品备货周期短，在保证安全库存的情况下，应该小批量多批次按需储存，尽可能降低库存总量，减少仓储管理成本，但如果控制不好库存，很容易出现断货风险。</span
          >
        </div>
        <div class="customerType" style="width: 1115px">
          <img src="@/assets/images/商品b.png" alt="" />
          <span>B类商品销售额贡献次之，这种商品备货周期可以适当延长。</span>
        </div>
        <div class="customerType" style="width: 1115px">
          <img src="@/assets/images/商品c.png" alt="" />
          <span
            >C类商品属于长尾商品，备货周期更长，最好是集中采购，并适当增大库存量，相应减少订货次数。</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getUserInfo } from '@/utils/auth'
import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const knowledgeFlag = ref(false);
const errorNum = ref(0);
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 step1Data = ref([
  {
    name: "男士配饰",
    amount: "2300",
  },
  {
    name: "儿童服装",
    amount: "2300",
  },
  {
    name: "婴儿用品",
    amount: "2300",
  },
  {
    name: "床上用品",
    amount: "2300",
  },
]);
const fileTable1 = ref([
  {
    id: "20250101",
    name: "男士配饰",
    amount: "2300",
  },
  {
    id: "20250102",
    name: "儿童服装",
    amount: "300",
  },
  {
    id: "20250103",
    name: "婴儿用品",
    amount: "400",
  },
  {
    id: "20250104",
    name: "床上用品",
    amount: "1200",
  },
  {
    id: "20250105",
    name: "男士配饰",
    amount: "1800",
  },
  {
    id: "20250106",
    name: "婴儿用品",
    amount: "300",
  },
  {
    id: "20250107",
    name: "男士配饰",
    amount: "1800",
  },
  {
    id: "20250108",
    name: "儿童服装",
    amount: "300",
  },
  {
    id: "20250109",
    name: "床上用品",
    amount: "1200",
  },
  {
    id: "20250110",
    name: "婴儿用品",
    amount: "400",
  },
]);
const step2Data = ref([
  {
    name: "男士配饰",
    amount: "",
  },
  { name: "儿童服装", amount: "" },
  { name: "婴儿用品", amount: "" },
  { name: "床上用品", amount: "" },
]);
const step3Data = ref([
  {
    data1: "男士配饰",
    data2: "5900",
  },
  {
    data1: "床上用品",
    data2: "2400",
  },
  {
    data1: "婴儿用品",
    data2: "1100",
  },

  {
    data1: "儿童服装",
    data2: "600",
  },
]);
const step4Data = ref([
  {
    data1: "男士配饰",
    data2: "5900",
    data3: "59%",
    data4: "2",
  },
  {
    data1: "床上用品",
    data2: "2400",
    data3: "83%",
    data4: "3",
  },
  {
    data1: "婴儿用品",
    data2: "1100",
    data3: "94%",
    data4: "1",
  },
  {
    data1: "儿童服装",
    data2: "600",
    data3: "100%",
    data4: "1",
  },
]);
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%，给予一般关注",
  },
]);
onBeforeUnmount(() => {
  saveData();
});
onMounted(() => {
  getData();
});
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 downloadData = () => {
  // console.log(666);
  portraitModel
    .downloadDataByABC({})
    .then((res) => {
      // console.log(res,'--');
      const blob = new Blob([res], { type: "application/vnd.ms-excel" });
      downBlobFile(`案例数据-帕累托分析`, blob);
    })
    .catch((error) => {});
};
const step1Submit = () => {
  step1Error.value = 0;
  for (let i in step1Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step1Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step1Data.value[0].params && step1Data.value[0].params !== "5900") {
    step1Error.value++;
  }
  if (step1Data.value[1].params && step1Data.value[1].params !== "600") {
    step1Error.value++;
  }
  if (step1Data.value[2].params && step1Data.value[2].params !== "1100") {
    step1Error.value++;
  }
  if (step1Data.value[3].params && step1Data.value[3].params !== "2400") {
    step1Error.value++;
  }
  console.log(step1Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step1AnswerFlag.value = true;
  //将所填值同步到第二步表格
  step2Data.value[0].amount = step1Data.value[0].params;
  step2Data.value[1].amount = step1Data.value[1].params;
  step2Data.value[2].amount = step1Data.value[2].params;
  step2Data.value[3].amount = step1Data.value[3].params;
};
const step2Submit = () => {
  step2Error.value = 0;
  if (
    Number(step2Data.value[0].amount) > Number(step2Data.value[1].amount) &&
    Number(step2Data.value[1].amount) > Number(step2Data.value[2].amount) &&
    Number(step2Data.value[2].amount) > Number(step2Data.value[3].amount)
  ) {
    step2Error.value = 0;
  } else {
    step2Error.value = 1;
  }
  console.log("错误数", step2Error.value);
  proxy.$modal.msgSuccess("提交成功");
  step3Data.value[0].data2 = step2Data.value[0].amount;
  step3Data.value[1].data2 = step2Data.value[1].amount;
  step3Data.value[2].data2 = step2Data.value[2].amount;
  step3Data.value[3].data2 = step2Data.value[3].amount;
  step2AnswerFlag.value = true;
};
const step3Submit = () => {
  step3Error.value = 0;
  for (let i in step3Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step3Data.value[i].params1 || !step3Data.value[i].params2) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "59") {
    step3Error.value++;
  }
  if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "59") {
    step3Error.value++;
  }
  if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "24") {
    step3Error.value++;
  }
  if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "83") {
    step3Error.value++;
  }
  if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "11") {
    step3Error.value++;
  }
  if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "94") {
    step3Error.value++;
  }
  if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "6") {
    step3Error.value++;
  }
  if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "100") {
    step3Error.value++;
  }
  console.log("错误数", step3Error.value);
  proxy.$modal.msgSuccess("提交成功");
  step4Data.value[0].data2 = step3Data.value[0].data2;
  step4Data.value[1].data2 = step3Data.value[1].data2;
  step4Data.value[2].data2 = step3Data.value[2].data2;
  step4Data.value[3].data2 = step3Data.value[3].data2;
  step4Data.value[0].data3 = step3Data.value[0].params2;
  step4Data.value[1].data3 = step3Data.value[1].params2;
  step4Data.value[2].data3 = step3Data.value[2].params2;
  step4Data.value[3].data3 = step3Data.value[3].params2;
  step3AnswerFlag.value = true;
};
const step4Submit = () => {
  step4Error.value = 0;
  // console.log('asd1112');
  for (let i in step4Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step4Data.value[i].params || !step4Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step4Data.value[0].params && step4Data.value[0].params !== "A类商品") {
    step4Error.value++;
  }
  if (step4Data.value[1].params && step4Data.value[1].params !== "B类商品") {
    step4Error.value++;
  }
  if (step4Data.value[2].params && step4Data.value[2].params !== "C类商品") {
    step4Error.value++;
  }
  if (step4Data.value[3].params && step4Data.value[3].params !== "C类商品") {
    step4Error.value++;
  }
  console.log("错误数", step4Error.value);
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
};
const saveData = () => {
  const params = {
    stepFiveA: step1Data.value[0].params,
    stepFiveB: step1Data.value[1].params,
    stepFiveC: step1Data.value[2].params,
    stepFiveD: step1Data.value[3].params,
    stepSixA: step3Data.value[0].params1,
    stepSixB: step3Data.value[0].params2,
    stepSixC: step3Data.value[1].params1,
    stepSixD: step3Data.value[1].params2,
    stepSevenA: step3Data.value[2].params1,
    stepSevenB: step3Data.value[2].params2,
    stepSevenC: step3Data.value[3].params1,
    stepSevenD: step3Data.value[3].params2,
    stepEightA: step4Data.value[0].params,
    stepEightB: step4Data.value[1].params,
    stepEightC: step4Data.value[2].params,
    stepEightD: step4Data.value[3].params,
    // stepNineA: step4Data.value[0].params1,
    // stepNineB: step4Data.value[0].params2,
    // stepNineC: step4Data.value[0].params3,
    // stepNineD: step4Data.value[1].params1,
    // stepTenA: step4Data.value[1].params2,
    // stepTenB: step4Data.value[1].params3,
    // stepTenC: step4Data.value[2].params1,
    // stepTenD: step4Data.value[2].params2,
    // stepElevenA: step4Data.value[2].params3,
    // stepOneA: step5Data.value[0].params1,
    // stepOneB: step5Data.value[0].params2,
    // stepOneC: step5Data.value[0].params3,
    // stepOneD: step6Data.value[0].params1,
    // 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: "帕累托/ABC分析",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};
const getData = () => {
  portraitModel
    .getData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "帕累托/ABC分析",
    })
    .then((res) => {
      step1Data.value[0].params = res.data.stepFiveA;
      step1Data.value[1].params = res.data.stepFiveB;
      step1Data.value[2].params = res.data.stepFiveC;
      step1Data.value[3].params = res.data.stepFiveD;
      step3Data.value[0].params1 = res.data.stepSixA;
      step3Data.value[0].params2 = res.data.stepSixB;
      step3Data.value[1].params1 = res.data.stepSixC;
      step3Data.value[1].params2 = res.data.stepSixD;
      step3Data.value[2].params1 = res.data.stepSevenA;
      step3Data.value[2].params2 = res.data.stepSevenB;
      step3Data.value[3].params1 = res.data.stepSevenC;
      step3Data.value[3].params2 = res.data.stepSevenD;
      step4Data.value[0].params = res.data.stepEightA;
      step4Data.value[1].params = res.data.stepEightB;
      step4Data.value[2].params = res.data.stepEightC;
      step4Data.value[3].params = res.data.stepEightD;
      // step4Data.value[0].params1 = res.data.stepNineA;
      // step4Data.value[0].params2 = res.data.stepNineB;
      // step4Data.value[0].params3 = res.data.stepNineC;
      // step4Data.value[1].params1 = res.data.stepNineD;
      // step4Data.value[1].params2 = res.data.stepTenA;
      // step4Data.value[1].params3 = res.data.stepTenB;
      // step4Data.value[2].params1 = res.data.stepTenC;
      // step4Data.value[2].params2 = res.data.stepTenD;
      // step4Data.value[2].params3 = res.data.stepElevenA;
      // step5Data.value[0].params1 = res.data.stepOneA;
      // step5Data.value[0].params2 = res.data.stepOneB;
      // step5Data.value[0].params3 = res.data.stepOneC;
      // step6Data.value[0].params1 = 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;
    })
    .catch((error) => {});
};
const submitData = () => {
  console.log("tj");
  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: "帕累托/ABC分析",
      numberOfErrors: errorNum.value,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
    })
    .catch((error) => {});
};
const retrain = () => {
  portraitModel
    .retrain({
      userId: JSON.parse(getUserInfo()).userId,
      module: "帕累托/ABC分析",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");
      for (let i in step1Data.value) {
        step1Data.value[i].params = "";
      }
      for (let i in step3Data.value) {
        step3Data.value[i].params1 = "";
        step3Data.value[i].params2 = "";
      }
      for (let i in step4Data.value) {
        step4Data.value[i].params = "";
      }
      // for (let i in step5Data.value) {
      //   step5Data.value[i].params1 = "";
      //   step5Data.value[i].params2 = "";
      //   step5Data.value[i].params3 = "";
      // }
    })
    .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
</script>

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

  .import {
    display: flex;
    font-size: 15px;
    font-weight: bold;
    width: 180px;
    height: 56px;
    background-image: url("@/assets/images/taskImport.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;
      }
    }
  }
  .line {
    width: 1400px;
    height: 1px;
    border: 1px solid #0452c6;
    opacity: 0.5;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
::v-deep .el-table tr {
  background-color: #002652 !important;
  color: #fff;
}
</style>