diff --git a/src/api/portraitModel.js b/src/api/portraitModel.js
index 8e6f7ef..3ae91ef 100644
--- a/src/api/portraitModel.js
+++ b/src/api/portraitModel.js
@@ -33,7 +33,14 @@ export function downloadDataByBoston(data) {
     params: data,
   });
 }
-//数据下载-帕累托/ABC分析
+//数据下载-漏斗分析
+export function downloadDataByFunnel(data) {
+    return request({
+      url: "/api/downDataByUserPortrait/analysisByFunnelModel",
+      method: "get",
+      params: data,
+    });
+  }
 //筛选出统计样本
 export function filterOutStatisSample(data) {
   return request({
diff --git a/src/views/portraitModel/components/abcAnalysis.vue b/src/views/portraitModel/components/abcAnalysis.vue
index db7833d..4b853d2 100644
--- a/src/views/portraitModel/components/abcAnalysis.vue
+++ b/src/views/portraitModel/components/abcAnalysis.vue
@@ -356,9 +356,11 @@ 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: "男士配饰",
@@ -575,6 +577,12 @@ const typeData = ref([
     data2: "占总销售额的10%，给予一般关注",
   },
 ]);
+onBeforeUnmount(() => {
+  saveData();
+});
+onMounted(() => {
+  getData();
+});
 const moveUp = (index, row) => {
   console.log("上移", index, row);
   if (index > 0) {
@@ -629,6 +637,7 @@ const step1Submit = () => {
   }
   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;
@@ -700,8 +709,162 @@ const step3Submit = () => {
   step3AnswerFlag.value = true;
 };
 const step4Submit = () => {
-  console.log('asd');
+  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: 492,
+      module: "帕累托/ABC分析",
+      ...params,
+    })
+    .then((res) => {})
+    .catch((error) => {});
+};
+const getData = () => {
+  portraitModel
+    .getData({
+      userId: 492,
+      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: 492,
+      taskName: "帕累托/ABC分析",
+      numberOfErrors: errorNum.value,
+    })
+    .then((res) => {
+      proxy.$modal.msgSuccess("提交成功");
+    })
+    .catch((error) => {});
 };
+defineExpose({
+  submitData,
+  // practicalTraining,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/portraitModel/components/funnelAnalysis.vue b/src/views/portraitModel/components/funnelAnalysis.vue
index 88015c5..f506228 100644
--- a/src/views/portraitModel/components/funnelAnalysis.vue
+++ b/src/views/portraitModel/components/funnelAnalysis.vue
@@ -4,9 +4,12 @@
       <img src="@/assets/images/导入.png" alt="" />
       <span>任务知识导入</span>
     </div>
-    <div v-if="knowledgeFlag" v-html="`<p>1、漏斗分析模型——从注册到购买的转化率</p><p> &nbsp; &nbsp; &nbsp; 现代营销观念认为：营销管理重在过程，控制了过程就控制了结果。 用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型，其精细化程度影响着营销管理的成败，以及用户行为分析的精准度。</p><p>粗陋的漏斗分析模型因为过程管理不透明、数据分析不精细、用户行为分析不科学而造成结果失控。</p><p>1.1 什么是漏斗分析？</p><p> &nbsp; &nbsp; &nbsp; 究竟什么是漏斗分析？漏斗分析是一套流程式数据分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。</p><p> &nbsp; &nbsp; &nbsp; 漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。例如在一款产品服务平台中，直播用户从激活 APP 开始到花费，一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较,能够直观地发现和说明问题所在，从而找到优化方向。</p><p>1.2 漏斗分析模型的特点与价值</p><p> &nbsp; &nbsp; &nbsp; 对于业务流程相对规范、周期较长、环节较多的流程分析,能够直观地发现和说明问题所在。科学的漏斗分析模型能够实现以下价值：</p><p> &nbsp; &nbsp; &nbsp; • 企业可以监控用户在各个层级的转化情况，聚焦用户选购全流程中最有效转化路径；</p><p> &nbsp; &nbsp; &nbsp; • 通过不同层级的转化情况，迅速定位流失环节，持续地针对性分析找到可优化点，提升用户体验。</p><p> &nbsp; &nbsp; &nbsp; • 科学的漏斗分析能够展现转化率趋势的曲线，能帮助企业精细地捕捉用户行为变化。</p><p> &nbsp; &nbsp; &nbsp; • 不同属性的用户群体漏斗比较，从差异角度窥视优化思路。漏斗对比分析：通过观察不同属性的用户群体（如新注册用户与老客户、不同渠道来源的客户）各环节转化率，各流程步骤转化率的差异对比，了解转化率最高的用户群体，分析漏斗合理性，并针对转化率异常环节进行调整。</p><p>1.3 在漏斗分析模型中，科学归因、属性关联的重要性</p><p> &nbsp; &nbsp; &nbsp;在科学的漏斗分析中，需要科学归因设置。每一次转化节点应根据事件功劳差异（事件对转化的功劳大小）而科学设置。企业一直致力定义最佳用户购买路径，并将资源高效集中于此。而在企业真实的漏斗分析中，业务流程转化并非理想中那么简单。</p><p> &nbsp; &nbsp; &nbsp;以市场营销为例，市场活动、线上运营、邮件营销都可能触发用户购买。A 欲选购一款化妆品，通过市场活动知道了M 产品，后来在百度贴吧又了解了更多信息，但是始终没有下定决心购买。后来收到 M 公司的营销邮件，A 被打折信息及详实的客户评价所吸引，直接邮件内跳转至网站购买了该商品。</p><p> &nbsp; &nbsp; &nbsp;那么，在漏斗设置时，转化归因应该“归”哪一个渠道呢？在这个案例中，运营人员愿意以实际转化的事件的属性为准。邮件营销的渠道在用户购买决策的全流程中对用户影响的“功劳”最大、权重较大，直接促进用户转化。在科学的漏斗分析模型中，用户群体筛选和分组时，以实际转化事件——邮件营销来源的用户群体的属性为准，则大大增大了漏斗分析的科学性。</p><p>2、漏斗图能得出什么结论</p><p>漏斗图中各层级数据大小的变化可以反映出不同阶段的转化率和数量变化情况，从而揭示出一些现象和趋势。以下是一些常见的现象和解读：</p><p>（1）转化率变化：通过比较不同层级的数据大小，可以了解转化率的变化情况。如果某个层级的数据量较大，而下一个层级的数据量较小，说明转化率较低，存在较大的流失率。反之，如果各层级的数据量相对平衡，说明转化率较高，流失率较低。</p><p>（2）瓶颈阶段：如果漏斗图中某个层级的数据量明显小于上一个层级，形成了一个明显的瓶颈，说明在该阶段存在较大的流失或阻碍。这可以帮助识别和解决流程中的问题，以提高转化率。</p><p>（3）数据趋势：通过观察不同层级数据的大小和变化趋势，可以了解整个过程的数据趋势。例如，如果漏斗图的层级数据逐渐减小，呈现出明显的下降趋势，说明整个过程存在较大的流失率。反之，如果漏斗图的层级数据保持稳定或逐渐增加，说明整个过程的转化率较高。</p><p>（4）优化机会：通过分析各层级的数据大小，可以确定哪些阶段的转化率较低，存在优化的机会。例如，如果某个层级的数据量明显较小，可以针对该阶段的流程和策略进行优化，以提高转化率</p>`">
-     
-    </div>
+    <div
+      v-if="knowledgeFlag"
+      v-html="
+        `<p>1、漏斗分析模型——从注册到购买的转化率</p><p> &nbsp; &nbsp; &nbsp; 现代营销观念认为：营销管理重在过程，控制了过程就控制了结果。 用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型，其精细化程度影响着营销管理的成败，以及用户行为分析的精准度。</p><p>粗陋的漏斗分析模型因为过程管理不透明、数据分析不精细、用户行为分析不科学而造成结果失控。</p><p>1.1 什么是漏斗分析？</p><p> &nbsp; &nbsp; &nbsp; 究竟什么是漏斗分析？漏斗分析是一套流程式数据分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。</p><p> &nbsp; &nbsp; &nbsp; 漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。例如在一款产品服务平台中，直播用户从激活 APP 开始到花费，一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较,能够直观地发现和说明问题所在，从而找到优化方向。</p><p>1.2 漏斗分析模型的特点与价值</p><p> &nbsp; &nbsp; &nbsp; 对于业务流程相对规范、周期较长、环节较多的流程分析,能够直观地发现和说明问题所在。科学的漏斗分析模型能够实现以下价值：</p><p> &nbsp; &nbsp; &nbsp; • 企业可以监控用户在各个层级的转化情况，聚焦用户选购全流程中最有效转化路径；</p><p> &nbsp; &nbsp; &nbsp; • 通过不同层级的转化情况，迅速定位流失环节，持续地针对性分析找到可优化点，提升用户体验。</p><p> &nbsp; &nbsp; &nbsp; • 科学的漏斗分析能够展现转化率趋势的曲线，能帮助企业精细地捕捉用户行为变化。</p><p> &nbsp; &nbsp; &nbsp; • 不同属性的用户群体漏斗比较，从差异角度窥视优化思路。漏斗对比分析：通过观察不同属性的用户群体（如新注册用户与老客户、不同渠道来源的客户）各环节转化率，各流程步骤转化率的差异对比，了解转化率最高的用户群体，分析漏斗合理性，并针对转化率异常环节进行调整。</p><p>1.3 在漏斗分析模型中，科学归因、属性关联的重要性</p><p> &nbsp; &nbsp; &nbsp;在科学的漏斗分析中，需要科学归因设置。每一次转化节点应根据事件功劳差异（事件对转化的功劳大小）而科学设置。企业一直致力定义最佳用户购买路径，并将资源高效集中于此。而在企业真实的漏斗分析中，业务流程转化并非理想中那么简单。</p><p> &nbsp; &nbsp; &nbsp;以市场营销为例，市场活动、线上运营、邮件营销都可能触发用户购买。A 欲选购一款化妆品，通过市场活动知道了M 产品，后来在百度贴吧又了解了更多信息，但是始终没有下定决心购买。后来收到 M 公司的营销邮件，A 被打折信息及详实的客户评价所吸引，直接邮件内跳转至网站购买了该商品。</p><p> &nbsp; &nbsp; &nbsp;那么，在漏斗设置时，转化归因应该“归”哪一个渠道呢？在这个案例中，运营人员愿意以实际转化的事件的属性为准。邮件营销的渠道在用户购买决策的全流程中对用户影响的“功劳”最大、权重较大，直接促进用户转化。在科学的漏斗分析模型中，用户群体筛选和分组时，以实际转化事件——邮件营销来源的用户群体的属性为准，则大大增大了漏斗分析的科学性。</p><p>2、漏斗图能得出什么结论</p><p>漏斗图中各层级数据大小的变化可以反映出不同阶段的转化率和数量变化情况，从而揭示出一些现象和趋势。以下是一些常见的现象和解读：</p><p>（1）转化率变化：通过比较不同层级的数据大小，可以了解转化率的变化情况。如果某个层级的数据量较大，而下一个层级的数据量较小，说明转化率较低，存在较大的流失率。反之，如果各层级的数据量相对平衡，说明转化率较高，流失率较低。</p><p>（2）瓶颈阶段：如果漏斗图中某个层级的数据量明显小于上一个层级，形成了一个明显的瓶颈，说明在该阶段存在较大的流失或阻碍。这可以帮助识别和解决流程中的问题，以提高转化率。</p><p>（3）数据趋势：通过观察不同层级数据的大小和变化趋势，可以了解整个过程的数据趋势。例如，如果漏斗图的层级数据逐渐减小，呈现出明显的下降趋势，说明整个过程存在较大的流失率。反之，如果漏斗图的层级数据保持稳定或逐渐增加，说明整个过程的转化率较高。</p><p>（4）优化机会：通过分析各层级的数据大小，可以确定哪些阶段的转化率较低，存在优化的机会。例如，如果某个层级的数据量明显较小，可以针对该阶段的流程和策略进行优化，以提高转化率</p>`
+      "
+    ></div>
     <div v-if="!knowledgeFlag">
       <div class="caseBack">
         <div class="title">
@@ -41,7 +44,7 @@
             <el-table-column label="完成交易" align="center" prop="data6">
             </el-table-column>
           </el-table>
-          <div class="download">下载数据</div>
+          <div class="download" @click="downloadData">下载数据</div>
         </div>
       </div>
       <div class="line"></div>
@@ -130,7 +133,7 @@
               </template>
             </el-table-column>
           </el-table>
-          <div class="submit">提交</div>
+          <div class="submit" @click="step1Submit">提交</div>
         </div>
       </div>
       <div class="line"></div>
@@ -143,8 +146,81 @@
           以各个页面节点的人数为统计指标，绘制漏斗图：
         </span>
         <div style="margin-top: 10px; display: flex">
-          <div id="funnel" style="width: 600px; height: 400px"></div>
-          <div class="submit">提交</div>
+          <div id="funnel" style="width: 520px; height: 400px"></div>
+          <div style="margin-top: 70px">
+            <div>
+              <el-select
+                v-model="step2Select1"
+                placeholder="请选择"
+                style="width: 130px; margin-bottom: 25px"
+              >
+                <el-option :label="'浏览2071'" :value="'浏览2071'" />
+                <el-option :label="'购物车622'" :value="'购物车622'" />
+                <el-option :label="'订单284'" :value="'订单284'" />
+                <el-option :label="'支付235'" :value="'支付235'" />
+                <el-option :label="'完成交易223'" :value="'完成交易223'" />
+              </el-select>
+            </div>
+            <div>
+              <el-select
+                v-model="step2Select2"
+                placeholder="请选择"
+                style="width: 130px; margin-bottom: 25px"
+              >
+                <el-option :label="'浏览2071'" :value="'浏览2071'" />
+                <el-option :label="'购物车622'" :value="'购物车622'" />
+                <el-option :label="'订单284'" :value="'订单284'" />
+                <el-option :label="'支付235'" :value="'支付235'" />
+                <el-option :label="'完成交易223'" :value="'完成交易223'" />
+              </el-select>
+            </div>
+            <div>
+              <el-select
+                v-model="step2Select3"
+                placeholder="请选择"
+                style="width: 130px; margin-bottom: 25px"
+              >
+                <el-option :label="'浏览2071'" :value="'浏览2071'" />
+                <el-option :label="'购物车622'" :value="'购物车622'" />
+                <el-option :label="'订单284'" :value="'订单284'" />
+                <el-option :label="'支付235'" :value="'支付235'" />
+                <el-option :label="'完成交易223'" :value="'完成交易223'" />
+              </el-select>
+            </div>
+            <div>
+              <el-select
+                v-model="step2Select4"
+                placeholder="请选择"
+                style="width: 130px; margin-bottom: 25px"
+              >
+                <el-option :label="'浏览2071'" :value="'浏览2071'" />
+                <el-option :label="'购物车622'" :value="'购物车622'" />
+                <el-option :label="'订单284'" :value="'订单284'" />
+                <el-option :label="'支付235'" :value="'支付235'" />
+                <el-option :label="'完成交易223'" :value="'完成交易223'" />
+              </el-select>
+            </div>
+            <div>
+              <el-select
+                v-model="step2Select5"
+                placeholder="请选择"
+                style="width: 130px; margin-bottom: 25px"
+              >
+                <el-option :label="'浏览2071'" :value="'浏览2071'" />
+                <el-option :label="'购物车622'" :value="'购物车622'" />
+                <el-option :label="'订单284'" :value="'订单284'" />
+                <el-option :label="'支付235'" :value="'支付235'" />
+                <el-option :label="'完成交易223'" :value="'完成交易223'" />
+              </el-select>
+            </div>
+          </div>
+          <div
+            class="submit"
+            style="margin-top: 70px; margin-left: 100px"
+            @click="step2Submit"
+          >
+            提交
+          </div>
         </div>
       </div>
       <div class="line"></div>
@@ -161,7 +237,7 @@
             <div>
               <span>流失率排第一位的：</span>
               <el-select
-                v-model="asdas"
+                v-model="step3Select1"
                 placeholder="请选择"
                 style="width: 160px"
               >
@@ -175,7 +251,7 @@
             <div>
               <span>流失率排第二位的：</span>
               <el-select
-                v-model="asdas2"
+                v-model="step3Select2"
                 placeholder="请选择"
                 style="width: 160px"
               >
@@ -191,7 +267,7 @@
             </p>
           </div>
 
-          <div class="submit">提交</div>
+          <div class="submit" @click="step3Submit">提交</div>
         </div>
       </div>
       <div class="line"></div>
@@ -233,8 +309,18 @@
 </template>
 
 <script setup>
+import * as portraitModel from "@/api/portraitModel";
 import * as echarts from "echarts";
+import { downBlobFile } from "@/utils/index.js";
 import { onMounted } from "vue";
+const { proxy } = getCurrentInstance();
+const step2Select1 = ref("");
+const step2Select2 = ref("");
+const step2Select3 = ref("");
+const step2Select4 = ref("");
+const step2Select5 = ref("");
+const step3Select1 = ref("");
+const step3Select2 = ref("");
 const knowledgeFlag = ref(false);
 const step1Data = ref([
   {
@@ -447,7 +533,7 @@ const option = {
   //     },
   //   },
   legend: {
-    data: ["浏览", "购物车", "订单", "支付", "完成交易"],
+    // data: ["浏览", "购物车", "订单", "支付", "完成交易"],
 
     itemStyle: {},
     textStyle: {
@@ -489,16 +575,27 @@ const option = {
         },
       },
       data: [
-        { value: 2071, name: "浏览" },
-        { value: 622, name: "购物车" },
-        { value: 284, name: "订单" },
-        { value: 235, name: "支付" },
-        { value: 223, name: "完成交易" },
+        { value: 2071, name: "" },
+        { value: 622, name: "" },
+        { value: 284, name: "" },
+        { value: 235, name: "" },
+        { value: 223, name: "" },
       ],
     },
   ],
 };
+const step1Error = ref(0);
+const step2Error = ref(0);
+const step3Error = ref(0);
+const step1AnswerFlag = ref(false);
+const step2AnswerFlag = ref(false);
+const step3AnswerFlag = ref(false);
+const errorNum = ref(0);
+onBeforeUnmount(() => {
+  saveData();
+});
 onMounted(() => {
+  getData();
   var chartDom = document.getElementById("funnel");
   var myChart = echarts.init(chartDom);
   option && myChart.setOption(option);
@@ -523,6 +620,267 @@ const moveDown = (index, row) => {
     step2Data.value.splice(index, 0, downDate);
   }
 };
+const step1Submit = () => {
+  // console.log(6165);
+  step1Error.value = 0;
+  const step1DataSlice = step1Data.value.slice(1);
+  for (let i in step1DataSlice) {
+    if (
+      !step1DataSlice[i].params1 ||
+      !step1DataSlice[i].params2 ||
+      !step1DataSlice[i].params3 ||
+      !step1DataSlice[i].params4 ||
+      !step1DataSlice[i].params5
+    ) {
+      proxy.$modal.msgError("请先完成所有填空");
+      return;
+    }
+  }
+  //判断对错
+  if (step1DataSlice[0].params1 && step1DataSlice[0].params1 !== "100") {
+    step1Error.value++;
+  }
+  if (
+    step1DataSlice[0].params2 &&
+    step1DataSlice[0].params2 !== "30.0" &&
+    step1DataSlice[0].params2 !== "30"
+  ) {
+    step1Error.value++;
+  }
+  if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[0].params4 && step1DataSlice[0].params4 !== "82.7") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[0].params5 && step1DataSlice[0].params5 !== "94.9") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[1].params1 && step1DataSlice[1].params1 !== "0") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[1].params2 && step1DataSlice[1].params2 !== "70") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[1].params3 && step1DataSlice[1].params3 !== "54.3") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[1].params4 && step1DataSlice[1].params4 !== "17.3") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[1].params5 && step1DataSlice[1].params5 !== "5.1") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
+    step1Error.value++;
+  }
+  if (
+    step1DataSlice[2].params2 &&
+    step1DataSlice[2].params2 !== "30.0" &&
+    step1DataSlice[2].params2 !== "30"
+  ) {
+    step1Error.value++;
+  }
+  if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[2].params4 && step1DataSlice[2].params4 !== "11.3") {
+    step1Error.value++;
+  }
+  if (step1DataSlice[2].params5 && step1DataSlice[2].params5 !== "10.8") {
+    step1Error.value++;
+  }
+  console.log(step1Error.value, "错误数");
+  proxy.$modal.msgSuccess("提交成功");
+  step1AnswerFlag.value = true;
+  // console.log(6165);
+};
+const step2Submit = () => {
+  step2Error.value = 0;
+  if (
+    step2Select1.value == "" ||
+    step2Select2.value == "" ||
+    step2Select3.value == "" ||
+    step2Select4.value == "" ||
+    step2Select5.value == ""
+  ) {
+    proxy.$modal.msgError("请先完成选择");
+    return;
+  }
+  if (step2Select1.value !== "浏览2071") {
+    step2Error.value++;
+  }
+  if (step2Select2.value !== "购物车622") {
+    step2Error.value++;
+  }
+  if (step2Select3.value !== "订单284") {
+    step2Error.value++;
+  }
+  if (step2Select4.value !== "支付235") {
+    step2Error.value++;
+  }
+  if (step2Select5.value !== "完成交易223") {
+    step2Error.value++;
+  }
+  console.log(step2Error.value, "错误数");
+  proxy.$modal.msgSuccess("提交成功");
+  step2AnswerFlag.value = true;
+};
+const step3Submit = () => {
+  step3Error.value = 0;
+  if (step3Select1.value == "" || step3Select2.value == "") {
+    proxy.$modal.msgError("请先完成选择");
+    return;
+  }
+  if (step3Select1.value !== "浏览--购物车") {
+    step3Error.value++;
+  }
+  if (step3Select2.value !== "购物车--订单") {
+    step3Error.value++;
+  }
+  console.log(step3Error.value, "错误数");
+  proxy.$modal.msgSuccess("提交成功");
+  step3AnswerFlag.value = true;
+};
+const downloadData = () => {
+  portraitModel
+    .downloadDataByFunnel({})
+    .then((res) => {
+      // console.log(res,'--');
+      const blob = new Blob([res], { type: "application/vnd.ms-excel" });
+      downBlobFile(`案例数据-漏斗模型`, blob);
+    })
+    .catch((error) => {});
+};
+const saveData = () => {
+  const params = {
+    stepFiveA: step1Data.value[1].params1,
+    stepFiveB: step1Data.value[1].params2,
+    stepFiveC: step1Data.value[1].params3,
+    stepFiveD: step1Data.value[1].params4,
+    stepSixA: step1Data.value[1].params5,
+    stepSixB: step1Data.value[2].params1,
+    stepSixC: step1Data.value[2].params2,
+    stepSixD: step1Data.value[2].params3,
+    stepSevenA: step1Data.value[2].params4,
+    stepSevenB: step1Data.value[2].params5,
+    stepSevenC: step1Data.value[3].params1,
+    stepSevenD: step1Data.value[3].params2,
+    stepEightA: step1Data.value[3].params3,
+    stepEightB: step1Data.value[3].params4,
+    stepEightC: step1Data.value[3].params5,
+    stepEightD: step2Select1.value,
+    stepNineA: step2Select2.value,
+    stepNineB: step2Select3.value,
+    stepNineC: step2Select4.value,
+    stepNineD: step2Select5.value,
+    stepTenA: step3Select1.value,
+    stepTenB: step3Select2.value,
+    // 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: 492,
+      module: "转化分析-漏斗模型",
+      ...params,
+    })
+    .then((res) => {})
+    .catch((error) => {});
+};
+const getData = () => {
+  portraitModel
+    .getData({
+      userId: 492,
+      module: "转化分析-漏斗模型",
+    })
+    .then((res) => {
+      step1Data.value[1].params1 = res.data.stepFiveA;
+      step1Data.value[1].params2 = res.data.stepFiveB;
+      step1Data.value[1].params3 = res.data.stepFiveC;
+      step1Data.value[1].params4 = res.data.stepFiveD;
+      step1Data.value[1].params5 = res.data.stepSixA;
+      step1Data.value[2].params1 = res.data.stepSixB;
+      step1Data.value[2].params2 = res.data.stepSixC;
+      step1Data.value[2].params3 = res.data.stepSixD;
+      step1Data.value[2].params4 = res.data.stepSevenA;
+      step1Data.value[2].params5 = res.data.stepSevenB;
+      step1Data.value[3].params1 = res.data.stepSevenC;
+      step1Data.value[3].params2 = res.data.stepSevenD;
+      step1Data.value[3].params3 = res.data.stepEightA;
+      step1Data.value[3].params4 = res.data.stepEightB;
+      step1Data.value[3].params5 = res.data.stepEightC;
+      step2Select1.value = res.data.stepEightD;
+      step2Select2.value = res.data.stepNineA;
+      step2Select3.value = res.data.stepNineB;
+      step2Select4.value = res.data.stepNineC;
+      step2Select5.value = res.data.stepNineD;
+      step3Select1.value = res.data.stepTenA;
+      step3Select2.value = 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 = () => {
+  if (
+    !step1AnswerFlag.value ||
+    !step2AnswerFlag.value ||
+    !step3AnswerFlag.value
+  ) {
+    proxy.$modal.msgError("请先完成所有步骤！");
+    return;
+  }
+  errorNum.value = step1Error.value + step2Error.value + step3Error.value;
+  console.log(errorNum.value, "总错误次数");
+  portraitModel
+    .submit({
+      userId: 492,
+      taskName: "转化分析-漏斗模型",
+      numberOfErrors: errorNum.value,
+    })
+    .then((res) => {
+      proxy.$modal.msgSuccess("提交成功");
+    })
+    .catch((error) => {});
+  // console.log(666);
+};
+defineExpose({
+  submitData,
+  // practicalTraining,
+});
 </script>
 
 <style scoped lang="scss">