|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="import" @click="openKnowledge">
|
|
|
<img src="@/assets/images/导入.png" alt="" />
|
|
|
<span>任务知识导入</span>
|
|
|
</div>
|
|
|
<!-- <div
|
|
|
v-if="knowledgeFlag"
|
|
|
v-html="
|
|
|
`<p>1、漏斗分析模型——从注册到购买的转化率</p><p> 现代营销观念认为：营销管理重在过程，控制了过程就控制了结果。 用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型，其精细化程度影响着营销管理的成败，以及用户行为分析的精准度。</p><p>粗陋的漏斗分析模型因为过程管理不透明、数据分析不精细、用户行为分析不科学而造成结果失控。</p><p>1.1 什么是漏斗分析？</p><p> 究竟什么是漏斗分析？漏斗分析是一套流程式数据分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。</p><p> 漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。例如在一款产品服务平台中，直播用户从激活 APP 开始到花费，一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较,能够直观地发现和说明问题所在，从而找到优化方向。</p><p>1.2 漏斗分析模型的特点与价值</p><p> 对于业务流程相对规范、周期较长、环节较多的流程分析,能够直观地发现和说明问题所在。科学的漏斗分析模型能够实现以下价值：</p><p> • 企业可以监控用户在各个层级的转化情况，聚焦用户选购全流程中最有效转化路径；</p><p> • 通过不同层级的转化情况，迅速定位流失环节，持续地针对性分析找到可优化点，提升用户体验。</p><p> • 科学的漏斗分析能够展现转化率趋势的曲线，能帮助企业精细地捕捉用户行为变化。</p><p> • 不同属性的用户群体漏斗比较，从差异角度窥视优化思路。漏斗对比分析：通过观察不同属性的用户群体（如新注册用户与老客户、不同渠道来源的客户）各环节转化率，各流程步骤转化率的差异对比，了解转化率最高的用户群体，分析漏斗合理性，并针对转化率异常环节进行调整。</p><p>1.3 在漏斗分析模型中，科学归因、属性关联的重要性</p><p> 在科学的漏斗分析中，需要科学归因设置。每一次转化节点应根据事件功劳差异（事件对转化的功劳大小）而科学设置。企业一直致力定义最佳用户购买路径，并将资源高效集中于此。而在企业真实的漏斗分析中，业务流程转化并非理想中那么简单。</p><p> 以市场营销为例，市场活动、线上运营、邮件营销都可能触发用户购买。A 欲选购一款化妆品，通过市场活动知道了M 产品，后来在百度贴吧又了解了更多信息，但是始终没有下定决心购买。后来收到 M 公司的营销邮件，A 被打折信息及详实的客户评价所吸引，直接邮件内跳转至网站购买了该商品。</p><p> 那么，在漏斗设置时，转化归因应该“归”哪一个渠道呢？在这个案例中，运营人员愿意以实际转化的事件的属性为准。邮件营销的渠道在用户购买决策的全流程中对用户影响的“功劳”最大、权重较大，直接促进用户转化。在科学的漏斗分析模型中，用户群体筛选和分组时，以实际转化事件——邮件营销来源的用户群体的属性为准，则大大增大了漏斗分析的科学性。</p><p>2、漏斗图能得出什么结论</p><p>漏斗图中各层级数据大小的变化可以反映出不同阶段的转化率和数量变化情况，从而揭示出一些现象和趋势。以下是一些常见的现象和解读：</p><p>（1）转化率变化：通过比较不同层级的数据大小，可以了解转化率的变化情况。如果某个层级的数据量较大，而下一个层级的数据量较小，说明转化率较低，存在较大的流失率。反之，如果各层级的数据量相对平衡，说明转化率较高，流失率较低。</p><p>（2）瓶颈阶段：如果漏斗图中某个层级的数据量明显小于上一个层级，形成了一个明显的瓶颈，说明在该阶段存在较大的流失或阻碍。这可以帮助识别和解决流程中的问题，以提高转化率。</p><p>（3）数据趋势：通过观察不同层级数据的大小和变化趋势，可以了解整个过程的数据趋势。例如，如果漏斗图的层级数据逐渐减小，呈现出明显的下降趋势，说明整个过程存在较大的流失率。反之，如果漏斗图的层级数据保持稳定或逐渐增加，说明整个过程的转化率较高。</p><p>（4）优化机会：通过分析各层级的数据大小，可以确定哪些阶段的转化率较低，存在优化的机会。例如，如果某个层级的数据量明显较小，可以针对该阶段的流程和策略进行优化，以提高转化率</p>`
|
|
|
"
|
|
|
></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">
|
|
|
漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。比如一个电商APP，用户登录APP后，会看到广告页。点击广告页后会看到产品详情，如果用户想购买，就点击进去购物车页面，再进入支付页面，完成支付。每一步，用户都有流失的可能，因此两个步骤之间有一定的转化率。
|
|
|
<br />
|
|
|
现有以下某购物APP各个流程节点的用户数据，需要用漏斗模型进行分析：
|
|
|
</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="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"></el-table-column>
|
|
|
<el-table-column label="支付" align="center" prop="data5"></el-table-column>
|
|
|
<el-table-column label="完成交易" align="center" prop="data6"></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">
|
|
|
转化率=下一步人数/上一步人数*100%
|
|
|
<br />
|
|
|
流失率=1—转化率
|
|
|
<br />
|
|
|
总体转化率/最终转化率=该步人数/总访问量（浏览量）*100%
|
|
|
<br />
|
|
|
计算结果保留小数点后一位
|
|
|
<br />
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step1Data"
|
|
|
style="width: 900px"
|
|
|
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">
|
|
|
<template #default="scope">
|
|
|
<el-input v-if="scope.$index != 0" v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
|
|
|
<span v-if="scope.$index != 0">%</span>
|
|
|
<div v-if="showAnswerFlag & (scope.$index != 0)" 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="data3">
|
|
|
<template #default="scope">
|
|
|
<el-input v-if="scope.$index != 0" v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
|
|
|
<span v-if="scope.$index != 0">%</span>
|
|
|
<div v-if="showAnswerFlag & (scope.$index != 0)" 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="data4">
|
|
|
<template #default="scope">
|
|
|
<el-input v-if="scope.$index != 0" v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
|
|
|
<span v-if="scope.$index != 0">%</span>
|
|
|
<div v-if="showAnswerFlag & (scope.$index != 0)" 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-column label="支付" align="center" prop="data5">
|
|
|
<template #default="scope">
|
|
|
<el-input v-if="scope.$index != 0" v-model="scope.row.params4" placeholder="请输入" style="width: 100px"></el-input>
|
|
|
<span v-if="scope.$index != 0">%</span>
|
|
|
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError4" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError4" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="完成交易" align="center" prop="data6">
|
|
|
<template #default="scope">
|
|
|
<el-input v-if="scope.$index != 0" v-model="scope.row.params5" placeholder="请输入" style="width: 100px"></el-input>
|
|
|
<span v-if="scope.$index != 0">%</span>
|
|
|
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError5" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError5" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</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">
|
|
|
<div id="funnel" style="width: 520px; height: 400px"></div>
|
|
|
<div style="margin-top: 75px">
|
|
|
<div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 28px">
|
|
|
<el-select v-model="step2Select1" placeholder="请选择" style="width: 130px" @change="selectData($event, 4)">
|
|
|
<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 v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="step2Select1 != '浏览2071'" style="color: red">X</span>
|
|
|
<span v-if="step2Select1 == '浏览2071'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 32px">
|
|
|
<el-select v-model="step2Select2" placeholder="请选择" style="width: 130px" @change="selectData($event, 3)">
|
|
|
<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 v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="step2Select2 != '购物车622'" style="color: red">X</span>
|
|
|
<span v-if="step2Select2 == '购物车622'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
|
|
|
<el-select v-model="step2Select3" placeholder="请选择" style="width: 130px" @change="selectData($event, 2)">
|
|
|
<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 v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="step2Select3 != '订单284'" style="color: red">X</span>
|
|
|
<span v-if="step2Select3 == '订单284'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
|
|
|
<el-select v-model="step2Select4" placeholder="请选择" style="width: 130px" @change="selectData($event, 1)">
|
|
|
<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 v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="step2Select4 != '支付235'" style="color: red">X</span>
|
|
|
<span v-if="step2Select4 == '支付235'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
|
|
|
<el-select v-model="step2Select5" placeholder="请选择" style="width: 130px" @change="selectData($event, 0)">
|
|
|
<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 v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="step2Select5 != '完成交易223'" style="color: red">X</span>
|
|
|
<span v-if="step2Select5 == '完成交易223'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit" style="margin-top: 70px; margin-left: 100px" @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">
|
|
|
<div>
|
|
|
<div>
|
|
|
<span>流失率排第一位的：</span>
|
|
|
<el-select v-model="step3Select1" placeholder="请选择" style="width: 160px">
|
|
|
<el-option :label="'浏览--购物车'" :value="'浏览--购物车'" />
|
|
|
<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="step3Select1 != '浏览--购物车'" style="color: red">X</span>
|
|
|
<span v-if="step3Select1 == '浏览--购物车'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<br />
|
|
|
<div>
|
|
|
<span>流失率排第二位的：</span>
|
|
|
<el-select v-model="step3Select2" placeholder="请选择" style="width: 160px">
|
|
|
<el-option :label="'浏览--购物车'" :value="'浏览--购物车'" />
|
|
|
<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="step3Select2 != '购物车--订单'" style="color: red">X</span>
|
|
|
<span v-if="step3Select2 == '购物车--订单'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p>注：实际运用时 ，转化率需要与不同时期比较、与竞争对手、行业平均水平比较，分析的结果相对准确些。</p>
|
|
|
</div>
|
|
|
|
|
|
<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">针对转换率较低的环节步骤，制定改善措施：</span>
|
|
|
<br />
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
一、简化购物流程
|
|
|
<br />
|
|
|
购物车转化率受到购物流程的影响。如果购物流程复杂或繁琐，消费者可能会因为不方便而放弃购买。因此，简化购物流程是提高购物车转化率的关键。
|
|
|
<br />
|
|
|
1. 减少步骤：尽量减少购买过程中的步骤和页面数量。消费者希望能够快速完成购买，如果购买过程过于复杂，他们可能会选择放弃。
|
|
|
<br />
|
|
|
2. 简化表单：简化购买表单，只收集必要的信息。过多的信息收集可能会让消费者感到烦扰，从而影响购买意愿。
|
|
|
</span>
|
|
|
<br />
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
二、优化产品页面
|
|
|
<br />
|
|
|
产品页面是消费者了解和选择产品的关键环节。优化产品页面可以提高购物车转化率。
|
|
|
<br />
|
|
|
1. 清晰的产品信息：确保产品页面上提供清晰、详细的产品信息，包括产品描述、规格、图片等。消费者需要充分了解产品才能做出购买决策。
|
|
|
<br />
|
|
|
2. 强调产品优势和价值：突出产品的独特卖点和优势，让消费者明白购买该产品的价值和好处。
|
|
|
<br />
|
|
|
3. 用户评价和评级：展示其他消费者的评价和评级可以增加消费者对产品的信任度和购买意愿。
|
|
|
<br />
|
|
|
4. 清晰的购买按钮：在产品页面上放置清晰、醒目的购买按钮，方便消费者快速添加产品到购物车。
|
|
|
<br />
|
|
|
比如下决心改进广告页，更换了素材，更换了页面布局，最后有了ABC版本，这时候可以观察每个版本效果。如下图，持续改进广告页以后，能看到广告页点击有了提升，最终转化率也提升了。
|
|
|
</span>
|
|
|
<br />
|
|
|
|
|
|
<img src="@/assets/images/u3812.png" alt="" />
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
</div>
|
|
|
<pop-modal :showModel="dialogVisible" @closePop="handlClose">
|
|
|
<template v-slot:content>
|
|
|
<div
|
|
|
v-html="
|
|
|
`<p>1、漏斗分析模型——从注册到购买的转化率</p><p> 现代营销观念认为：营销管理重在过程，控制了过程就控制了结果。 用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型，其精细化程度影响着营销管理的成败，以及用户行为分析的精准度。</p><p>粗陋的漏斗分析模型因为过程管理不透明、数据分析不精细、用户行为分析不科学而造成结果失控。</p><p>1.1 什么是漏斗分析？</p><p> 究竟什么是漏斗分析？漏斗分析是一套流程式数据分析，它能够科学反映用户行为状态以及从起点到终点各阶段用户转化率情况的重要分析模型。</p><p> 漏斗分析模型已经广泛应用于流量监控、产品目标转化等日常数据运营与数据分析的工作中。例如在一款产品服务平台中，直播用户从激活 APP 开始到花费，一般的用户购物路径为激活 APP、注册账号、进入直播间、互动行为、礼物花费五大阶段，漏斗能够展现出各个阶段的转化率，通过漏斗各环节相关数据的比较,能够直观地发现和说明问题所在，从而找到优化方向。</p><p>1.2 漏斗分析模型的特点与价值</p><p> 对于业务流程相对规范、周期较长、环节较多的流程分析,能够直观地发现和说明问题所在。科学的漏斗分析模型能够实现以下价值：</p><p> • 企业可以监控用户在各个层级的转化情况，聚焦用户选购全流程中最有效转化路径；</p><p> • 通过不同层级的转化情况，迅速定位流失环节，持续地针对性分析找到可优化点，提升用户体验。</p><p> • 科学的漏斗分析能够展现转化率趋势的曲线，能帮助企业精细地捕捉用户行为变化。</p><p> • 不同属性的用户群体漏斗比较，从差异角度窥视优化思路。漏斗对比分析：通过观察不同属性的用户群体（如新注册用户与老客户、不同渠道来源的客户）各环节转化率，各流程步骤转化率的差异对比，了解转化率最高的用户群体，分析漏斗合理性，并针对转化率异常环节进行调整。</p><p>1.3 在漏斗分析模型中，科学归因、属性关联的重要性</p><p> 在科学的漏斗分析中，需要科学归因设置。每一次转化节点应根据事件功劳差异（事件对转化的功劳大小）而科学设置。企业一直致力定义最佳用户购买路径，并将资源高效集中于此。而在企业真实的漏斗分析中，业务流程转化并非理想中那么简单。</p><p> 以市场营销为例，市场活动、线上运营、邮件营销都可能触发用户购买。A 欲选购一款化妆品，通过市场活动知道了M 产品，后来在百度贴吧又了解了更多信息，但是始终没有下定决心购买。后来收到 M 公司的营销邮件，A 被打折信息及详实的客户评价所吸引，直接邮件内跳转至网站购买了该商品。</p><p> 那么，在漏斗设置时，转化归因应该“归”哪一个渠道呢？在这个案例中，运营人员愿意以实际转化的事件的属性为准。邮件营销的渠道在用户购买决策的全流程中对用户影响的“功劳”最大、权重较大，直接促进用户转化。在科学的漏斗分析模型中，用户群体筛选和分组时，以实际转化事件——邮件营销来源的用户群体的属性为准，则大大增大了漏斗分析的科学性。</p><p>2、漏斗图能得出什么结论</p><p>漏斗图中各层级数据大小的变化可以反映出不同阶段的转化率和数量变化情况，从而揭示出一些现象和趋势。以下是一些常见的现象和解读：</p><p>（1）转化率变化：通过比较不同层级的数据大小，可以了解转化率的变化情况。如果某个层级的数据量较大，而下一个层级的数据量较小，说明转化率较低，存在较大的流失率。反之，如果各层级的数据量相对平衡，说明转化率较高，流失率较低。</p><p>（2）瓶颈阶段：如果漏斗图中某个层级的数据量明显小于上一个层级，形成了一个明显的瓶颈，说明在该阶段存在较大的流失或阻碍。这可以帮助识别和解决流程中的问题，以提高转化率。</p><p>（3）数据趋势：通过观察不同层级数据的大小和变化趋势，可以了解整个过程的数据趋势。例如，如果漏斗图的层级数据逐渐减小，呈现出明显的下降趋势，说明整个过程存在较大的流失率。反之，如果漏斗图的层级数据保持稳定或逐渐增加，说明整个过程的转化率较高。</p><p>（4）优化机会：通过分析各层级的数据大小，可以确定哪些阶段的转化率较低，存在优化的机会。例如，如果某个层级的数据量明显较小，可以针对该阶段的流程和策略进行优化，以提高转化率</p>`
|
|
|
"
|
|
|
></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 { onMounted } from "vue";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
// const funnelData = ref([223, 235, 284, 622, 2071]);
|
|
|
const funnelData = ref(["", "", "", "", ""]);
|
|
|
const funnelYAxis = ref(["", "", "", "", ""]);
|
|
|
const dialogVisible = ref(false);
|
|
|
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([
|
|
|
{
|
|
|
data1: "人数",
|
|
|
data2: "2071",
|
|
|
data3: "622",
|
|
|
data4: "284",
|
|
|
data5: "235",
|
|
|
data6: "223",
|
|
|
},
|
|
|
{
|
|
|
data1: "上一步转化率",
|
|
|
data2: "2071",
|
|
|
data3: "622",
|
|
|
data4: "284",
|
|
|
data5: "235",
|
|
|
data6: "223",
|
|
|
},
|
|
|
{
|
|
|
data1: "上一步流失率",
|
|
|
data2: "2071",
|
|
|
data3: "622",
|
|
|
data4: "284",
|
|
|
data5: "235",
|
|
|
data6: "223",
|
|
|
},
|
|
|
{
|
|
|
data1: "最终转化率",
|
|
|
data2: "2071",
|
|
|
data3: "622",
|
|
|
data4: "284",
|
|
|
data5: "235",
|
|
|
data6: "223",
|
|
|
},
|
|
|
]);
|
|
|
const fileTable1 = ref([
|
|
|
{
|
|
|
data1: "人数",
|
|
|
data2: "2071",
|
|
|
data3: "622",
|
|
|
data4: "284",
|
|
|
data5: "235",
|
|
|
data6: "223",
|
|
|
},
|
|
|
]);
|
|
|
const step2Data = ref([
|
|
|
{
|
|
|
name: "A",
|
|
|
amount: "3",
|
|
|
account: "800",
|
|
|
},
|
|
|
{ name: "B", amount: "4", account: "1200" },
|
|
|
{ name: "C", amount: "6", account: "600" },
|
|
|
{ name: "D", amount: "7", account: "1400" },
|
|
|
]);
|
|
|
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: "8.一般挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
]);
|
|
|
const typeData = ref([
|
|
|
{
|
|
|
data1: "A类商品",
|
|
|
data2: "占总销售额的80%，需要重点关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "B类商品",
|
|
|
data2: "占总销售额的10%，给予次要关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "C类商品",
|
|
|
data2: "占总销售额的10%，给予一般关注",
|
|
|
},
|
|
|
]);
|
|
|
// const option = {
|
|
|
// title: {
|
|
|
// text: "漏斗图",
|
|
|
// // color:'#fff'
|
|
|
// textStyle: {
|
|
|
// color: "#fff",
|
|
|
// },
|
|
|
// },
|
|
|
// tooltip: {
|
|
|
// trigger: "item",
|
|
|
// formatter: "{b} : {c}",
|
|
|
// },
|
|
|
// // toolbox: {
|
|
|
// // feature: {
|
|
|
// // dataView: { readOnly: false },
|
|
|
// // restore: {},
|
|
|
// // saveAsImage: {},
|
|
|
// // },
|
|
|
// // },
|
|
|
// legend: {
|
|
|
// // data: ["浏览", "购物车", "订单", "支付", "完成交易"],
|
|
|
|
|
|
// itemStyle: {},
|
|
|
// textStyle: {
|
|
|
// color: "#fff",
|
|
|
// },
|
|
|
// },
|
|
|
// series: [
|
|
|
// {
|
|
|
// name: "Funnel",
|
|
|
// type: "funnel",
|
|
|
// left: "10%",
|
|
|
// top: 60,
|
|
|
// bottom: 60,
|
|
|
// width: "80%",
|
|
|
// min: 0,
|
|
|
// max: 2071,
|
|
|
// minSize: "0%",
|
|
|
// maxSize: "100%",
|
|
|
// sort: "descending",
|
|
|
// gap: 2,
|
|
|
// label: {
|
|
|
// show: true,
|
|
|
// position: "inside",
|
|
|
// },
|
|
|
// labelLine: {
|
|
|
// length: 10,
|
|
|
// lineStyle: {
|
|
|
// width: 1,
|
|
|
// type: "solid",
|
|
|
// },
|
|
|
// },
|
|
|
// itemStyle: {
|
|
|
// borderColor: "#fff",
|
|
|
// borderWidth: 1,
|
|
|
// },
|
|
|
// emphasis: {
|
|
|
// label: {
|
|
|
// fontSize: 20,
|
|
|
// },
|
|
|
// },
|
|
|
// data: [
|
|
|
// { 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 showAnswerFlag = ref(false);
|
|
|
const errorNum = ref(0);
|
|
|
const option = ref({});
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
const timer = ref(null);
|
|
|
const timeCount = ref(0);
|
|
|
onBeforeUnmount(() => {
|
|
|
saveData();
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
initEchart()
|
|
|
});
|
|
|
const initEchart = () => {
|
|
|
option.value = {
|
|
|
title: {
|
|
|
text: "漏斗图",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
// trigger: 'axis',
|
|
|
// axisPointer: {
|
|
|
// type: 'shadow'
|
|
|
// }
|
|
|
},
|
|
|
legend: {
|
|
|
data: [],
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
right: "4%",
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
show: false,
|
|
|
// type: 'value',
|
|
|
// boundaryGap: [0, 0.01]
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "category",
|
|
|
// data: ["1", "2", "3", "4", "5"],
|
|
|
data: funnelYAxis.value,
|
|
|
position: "center",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
stack: "one",
|
|
|
type: "bar",
|
|
|
barWidth: "60%",
|
|
|
data: [1120, 1113, 1090, 920, 220],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
//这里是重点
|
|
|
color: function (params) {
|
|
|
// 颜色设置透明
|
|
|
var colorList = ["rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)"];
|
|
|
return colorList[params.dataIndex];
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
label: {
|
|
|
show: true, // 显示数值
|
|
|
// position: 'top' // 在柱状图上方显示
|
|
|
},
|
|
|
stack: "one",
|
|
|
name: "",
|
|
|
type: "bar",
|
|
|
barWidth: "60%",
|
|
|
data: funnelData.value,
|
|
|
// data: [223, 235, 284, 622, 2071],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
//这里是重点
|
|
|
color: function (params) {
|
|
|
// 颜色设置透明
|
|
|
var colorList = ["#009FF1", "#003DA3", "#00B869", "#FE8D2A", "#FB54A1"];
|
|
|
return colorList[params.dataIndex];
|
|
|
},
|
|
|
},
|
|
|
borderColor: "#fff",
|
|
|
borderWidth: 1,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
var chartDom = document.getElementById("funnel");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
option.value && myChart.setOption(option.value);
|
|
|
};
|
|
|
const selectData = (item, index) => {
|
|
|
console.log(item, index);
|
|
|
if (item == "浏览2071") {
|
|
|
funnelData.value[index] = 2071;
|
|
|
funnelYAxis.value[index] = "浏览";
|
|
|
}
|
|
|
if (item == "购物车622") {
|
|
|
funnelData.value[index] = 622;
|
|
|
funnelYAxis.value[index] = "购物车";
|
|
|
}
|
|
|
if (item == "订单284") {
|
|
|
funnelData.value[index] = 284;
|
|
|
funnelYAxis.value[index] = "订单";
|
|
|
}
|
|
|
if (item == "支付235") {
|
|
|
funnelData.value[index] = 235;
|
|
|
funnelYAxis.value[index] = "支付";
|
|
|
}
|
|
|
if (item == "完成交易223") {
|
|
|
funnelData.value[index] = 223;
|
|
|
funnelYAxis.value[index] = "完成交易";
|
|
|
}
|
|
|
// var chartDom = document.getElementById("funnel");
|
|
|
// var myChart = echarts.init(chartDom);
|
|
|
// option.value && myChart.setOption(option.value);
|
|
|
initEchart();
|
|
|
};
|
|
|
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 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++;
|
|
|
step1DataSlice[0].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params2 && step1DataSlice[0].params2 !== "30.0" && step1DataSlice[0].params2 !== "30") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[0].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[0].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params4 && step1DataSlice[0].params4 !== "82.7") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[0].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params5 && step1DataSlice[0].params5 !== "94.9") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[0].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError5 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params1 && step1DataSlice[1].params1 !== "0") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[1].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params2 && step1DataSlice[1].params2 !== "70") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[1].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params3 && step1DataSlice[1].params3 !== "54.3") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[1].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params4 && step1DataSlice[1].params4 !== "17.3") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[1].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params5 && step1DataSlice[1].params5 !== "5.1") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[1].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError5 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[2].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params2 && step1DataSlice[2].params2 !== "30.0" && step1DataSlice[2].params2 !== "30") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[2].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[2].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params4 && step1DataSlice[2].params4 !== "11.3") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[2].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params5 && step1DataSlice[2].params5 !== "10.8") {
|
|
|
step1Error.value++;
|
|
|
step1DataSlice[2].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError5 = false;
|
|
|
}
|
|
|
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) => {});
|
|
|
window.open(baseUrl + "/api/downDataByUserPortrait/analysisByFunnelModel");
|
|
|
};
|
|
|
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: funnelData.value[0],
|
|
|
stepTenD: funnelData.value[1],
|
|
|
stepElevenA: funnelData.value[2],
|
|
|
stepOneA: funnelData.value[3],
|
|
|
stepOneB: funnelData.value[4],
|
|
|
// 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: "转化分析-漏斗模型",
|
|
|
...params,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const getData = () => {
|
|
|
portraitModel
|
|
|
.getData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
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;
|
|
|
|
|
|
funnelYAxis.value[4] = step2Select1.value;
|
|
|
|
|
|
funnelYAxis.value[3] = step2Select2.value;
|
|
|
|
|
|
funnelYAxis.value[2] = step2Select3.value;
|
|
|
|
|
|
funnelYAxis.value[1] = step2Select4.value;
|
|
|
|
|
|
funnelYAxis.value[0] = step2Select5.value;
|
|
|
funnelData.value[0] = res.data.stepTenC;
|
|
|
funnelData.value[1] = res.data.stepTenD;
|
|
|
funnelData.value[2] = res.data.stepElevenA;
|
|
|
funnelData.value[3] = res.data.stepOneA;
|
|
|
funnelData.value[4] = res.data.stepOneB;
|
|
|
// var chartDom = document.getElementById("funnel");
|
|
|
// var myChart = echarts.init(chartDom);
|
|
|
// option.value && myChart.setOption(option.value);
|
|
|
initEchart();
|
|
|
// 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;
|
|
|
//回显答案
|
|
|
if (res.data.subState & (res.data.subState == 1)) {
|
|
|
showAnswerFlag.value = true;
|
|
|
const step1DataSlice = step1Data.value.slice(1);
|
|
|
//判断对错
|
|
|
if (step1DataSlice[0].params1 && step1DataSlice[0].params1 !== "100") {
|
|
|
step1DataSlice[0].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params2 && step1DataSlice[0].params2 !== "30.0" && step1DataSlice[0].params2 !== "30") {
|
|
|
step1DataSlice[0].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
|
|
|
step1DataSlice[0].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params4 && step1DataSlice[0].params4 !== "82.7") {
|
|
|
step1DataSlice[0].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[0].params5 && step1DataSlice[0].params5 !== "94.9") {
|
|
|
step1DataSlice[0].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[0].isError5 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params1 && step1DataSlice[1].params1 !== "0") {
|
|
|
step1DataSlice[1].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params2 && step1DataSlice[1].params2 !== "70") {
|
|
|
step1DataSlice[1].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params3 && step1DataSlice[1].params3 !== "54.3") {
|
|
|
step1DataSlice[1].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params4 && step1DataSlice[1].params4 !== "17.3") {
|
|
|
step1DataSlice[1].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[1].params5 && step1DataSlice[1].params5 !== "5.1") {
|
|
|
step1DataSlice[1].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[1].isError5 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
|
|
|
step1DataSlice[2].isError1 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError1 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params2 && step1DataSlice[2].params2 !== "30.0" && step1DataSlice[2].params2 !== "30") {
|
|
|
step1DataSlice[2].isError2 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError2 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
|
|
|
step1DataSlice[2].isError3 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError3 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params4 && step1DataSlice[2].params4 !== "11.3") {
|
|
|
step1DataSlice[2].isError4 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError4 = false;
|
|
|
}
|
|
|
if (step1DataSlice[2].params5 && step1DataSlice[2].params5 !== "10.8") {
|
|
|
step1DataSlice[2].isError5 = true;
|
|
|
} else {
|
|
|
step1DataSlice[2].isError5 = false;
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.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, "总错误次数");
|
|
|
if(errorNum.value > 5){
|
|
|
errorNum.value = 5
|
|
|
}
|
|
|
portraitModel
|
|
|
.submit({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
taskName: "转化分析-漏斗模型",
|
|
|
numberOfErrors: errorNum.value,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
showAnswerFlag.value = true;
|
|
|
saveDataSubmit();
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
// console.log(666);
|
|
|
};
|
|
|
const saveDataSubmit = () => {
|
|
|
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: funnelData.value[0],
|
|
|
stepTenD: funnelData.value[1],
|
|
|
stepElevenA: funnelData.value[2],
|
|
|
stepOneA: funnelData.value[3],
|
|
|
stepOneB: funnelData.value[4],
|
|
|
// 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: "转化分析-漏斗模型",
|
|
|
...params,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const retrain = () => {
|
|
|
showAnswerFlag.value = false;
|
|
|
// portraitModel
|
|
|
// .retrain({
|
|
|
// userId: JSON.parse(getUserInfo()).userId,
|
|
|
// module: "转化分析-漏斗模型",
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
proxy.$modal.msgSuccess("重新实训成功");
|
|
|
for (let i in step1Data.value) {
|
|
|
step1Data.value[i].params1 = "";
|
|
|
step1Data.value[i].params2 = "";
|
|
|
step1Data.value[i].params3 = "";
|
|
|
step1Data.value[i].params4 = "";
|
|
|
step1Data.value[i].params5 = "";
|
|
|
}
|
|
|
step2Select1.value = "";
|
|
|
step2Select2.value = "";
|
|
|
step2Select3.value = "";
|
|
|
step2Select4.value = "";
|
|
|
step2Select5.value = "";
|
|
|
step3Select1.value = "";
|
|
|
step3Select2.value = "";
|
|
|
funnelData.value = ["", "", "", "", ""];
|
|
|
funnelYAxis.value = ["", "", "", "", ""];
|
|
|
// var chartDom = document.getElementById("funnel");
|
|
|
// var myChart = echarts.init(chartDom);
|
|
|
// option.value && myChart.setOption(option.value);
|
|
|
initEchart();
|
|
|
// })
|
|
|
// .catch((error) => {});
|
|
|
};
|
|
|
defineExpose({
|
|
|
submitData,
|
|
|
retrain,
|
|
|
// practicalTraining,
|
|
|
});
|
|
|
const openKnowledge = () => {
|
|
|
dialogVisible.value = true;
|
|
|
// startCount();
|
|
|
};
|
|
|
const handlClose = () => {
|
|
|
console.log('123');
|
|
|
dialogVisible.value = false;
|
|
|
if (timer.value) {
|
|
|
clearInterval(timer.value);
|
|
|
timer.value = null;
|
|
|
}
|
|
|
console.log("阅读时长", timeCount.value + "s");
|
|
|
submitTimeCount();
|
|
|
timeCount.value = 0;
|
|
|
};
|
|
|
const startCount = () => {
|
|
|
timer.value = setInterval(() => {
|
|
|
timeCount.value++;
|
|
|
}, 1000);
|
|
|
};
|
|
|
const submitTimeCount = () => {
|
|
|
// portraitModel
|
|
|
// .timeCountSubmit({
|
|
|
// stuScoreDetailsDTO: {
|
|
|
// userId: JSON.parse(getUserInfo()).userId,
|
|
|
// viewingTime: timeCount.value,
|
|
|
// },
|
|
|
// })
|
|
|
// .then((res) => {})
|
|
|
// .catch((error) => {});
|
|
|
};
|
|
|
</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;
|
|
|
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;
|
|
|
// }
|
|
|
::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>
|