|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="import" @click="openKnowledge">
|
|
|
<img src="@/assets/images/导入.png" alt="" />
|
|
|
<span>任务知识导入</span>
|
|
|
</div>
|
|
|
<!-- <div v-if="knowledgeFlag" v-html="knowledgeHtml"></div> -->
|
|
|
<div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
<span>案例背景：</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，在做商品推荐和货架摆放布局时候，将关联度高的商品放一起捆绑销售，从而提升销售额。
|
|
|
<br />
|
|
|
现有某购物商场的购物篮数据，请分析两两搭配销售的价值。A、B、C、D分别代表不同的商品
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="fileTable1"
|
|
|
style="width: 650px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="购物篮ID/订单ID" align="center" prop="id"></el-table-column>
|
|
|
<el-table-column label="商品1" align="center" prop="goods1"></el-table-column>
|
|
|
<el-table-column label="商品2" align="center" prop="goods2"></el-table-column>
|
|
|
<el-table-column label="商品3" align="center" prop="goods3"></el-table-column>
|
|
|
</el-table>
|
|
|
<div class="download" @click="downloadData">下载数据</div>
|
|
|
</div>
|
|
|
<p style="line-height: 25px; font-size: 14px">
|
|
|
计算公式如下：
|
|
|
<br />
|
|
|
1.支持度是指A和B两个商品同时被购买的概率，AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%=P(A∩B)
|
|
|
<br />
|
|
|
2.置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比，A对B的置信度=P(A∩B)/P(A)
|
|
|
<br />
|
|
|
3.提升度是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B产品的可能性之比（置信度/无条件概率），A对B的提升度=A对B的置信度/P(B）。
|
|
|
<br />
|
|
|
一般而言，提升度如果小于1，则该推荐规则不应该被使用。
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第一步，划分商品组合</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
根据购物篮A、B、C、D四种不同的商品，按照两两搭配的方式，可能有以下几种组合。
|
|
|
<br />
|
|
|
请按照A、B、C、D顺序依次两两组合：
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div style="display: flex">
|
|
|
<div>
|
|
|
<el-select v-model="combinationValue1" placeholder="请选择" style="width: 95px" size="small">
|
|
|
<el-option label="A" value="A" />
|
|
|
<el-option label="B" value="B" />
|
|
|
<el-option label="C" value="C" />
|
|
|
<el-option label="D" value="D" />
|
|
|
</el-select>
|
|
|
—
|
|
|
<el-select v-model="combinationValue2" placeholder="请选择" style="width: 95px" size="small">
|
|
|
<el-option label="A" value="A" />
|
|
|
<el-option label="B" value="B" />
|
|
|
<el-option label="C" value="C" />
|
|
|
<el-option label="D" value="D" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div style="display: flex; align-items: start">
|
|
|
<el-button class="addBtn" @click="addCombination">添加组合</el-button>
|
|
|
<img src="@/assets/images/箭头.png" alt="" />
|
|
|
<div class="comList">
|
|
|
<ul>
|
|
|
<p style="color: #fff">商品组合</p>
|
|
|
<li v-for="(item, index) in list" :key="index">
|
|
|
<span>{{ item }}</span>
|
|
|
<span v-if="item" style="float: right; margin-right: 5px; cursor: pointer" @click="deleteItem(index)">-</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="comListError" style="color: red">X</span>
|
|
|
<span v-if="!comListError" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="submit" @click="step1Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第二步，计算无条件概率</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">根据购物篮信息，计算A、B、C、D四种商品的无条件概率。</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step2Data"
|
|
|
style="width: 350px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品组合" align="center" prop="name"></el-table-column>
|
|
|
<el-table-column label="概率（100%）" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-input v-model="scope.row.params" placeholder="请输入" style="width: 70px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="submit" @click="step2Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第三步，计算支持度、置信度、提升度</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
按照第一步中的两两组合情况，依次计算各自组合的支持度、置信度、提升度。
|
|
|
<br />
|
|
|
计算结果保留小数点后两位小数。
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step3Data"
|
|
|
style="width: 650px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品组合" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="支持度" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 70px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError1" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="置信度" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 70px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError2" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="提升度" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-input v-model="scope.row.params3" placeholder="请输入" style="width: 70px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError3" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="submit" @click="step3Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第四步，判断两两搭配销售价值</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
当A对B的提升度＞1，则表示买A再买B的概率大于本身买B的概率，就表示买A对买B带来了提升效果。
|
|
|
<br />
|
|
|
当A对B的提升度＜1，则表示买A再买B的概率小于本身买B的概率，就表示买A对买B带来了负向效果。
|
|
|
<br />
|
|
|
当A对B的提升度 = 1，则代表买A对买B没有影响。
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step4Data"
|
|
|
style="width: 350px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品组合" align="center" prop="data1" width="120"></el-table-column>
|
|
|
<el-table-column label="支持度" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-select v-model="scope.row.params" placeholder="请选择" style="width: 95px" size="small">
|
|
|
<el-option label="提升效果" value="提升效果" />
|
|
|
<el-option label="负向效果" value="负向效果" />
|
|
|
<el-option label="没有影响" value="没有影响" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="scope.row.isError" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="submit" @click="step4Submit">提交</div>
|
|
|
</div>
|
|
|
<p style="line-height: 25px; font-size: 14px">进一步的分析，可以分析支持度最高top10的商品组合、置信度最高top10的商品组合、提升度最高top10的商品组合。</p>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第五步，制定营销策略</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">通过购物篮分析，能给实际销售带来的价值：</span>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/促销.png" alt="" />
|
|
|
<span>优化商品配置：可以厘清哪些商品可以一起购买,关联商品可以优化陈列方式、进行促销等;</span>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/需求.png" alt="" />
|
|
|
<span>了解客户需求：分析出顾客的购买习惯，顾客购买商品的时间、地点等;</span>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/趋势.png" alt="" />
|
|
|
<span>分析销售趋势：利用数据仓库对品种和库存的趋势进行分析,选定需要补充的商品,研究顾客购买趋势,分析季节性购买模式,确定降价商品。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pop-modal :showModel="dialogVisible" @closePop="handlClose">
|
|
|
<template v-slot:content>
|
|
|
<div v-html="knowledgeHtml"></div>
|
|
|
</template>
|
|
|
</pop-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
import * as echarts from "echarts";
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
import { onBeforeUnmount, onMounted } from "vue";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
const timer = ref(null);
|
|
|
const timeCount = ref(0);
|
|
|
const showAnswerFlag = ref(false);
|
|
|
const comListError = ref(false);
|
|
|
const knowledgeHtml = ref(
|
|
|
`<p style="text-align: left;">一、理解购物篮分析</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，从而发现潜在的消费行为和需求，为电商平台提供决策支持。通过购物篮分析，电商平台可以更好地理解用户的购物习惯和偏好，从而为用户提供更加精准的推荐和产品布局。</span></p><p>购物篮分析的关键衡量指标有三个：支持度、置信度、提升度</p><p>为了更好地解释这三个指标，这里我先跟大家举个例子，后续就用这个例子说明。</p><p>某超市30天订单数一共10000单，其中包含A商品的订单有600单，包含B商品的订单有400单，同时包含A和B两种商品的订单有300单。</p><p>购买A商品的概率 P(A)=(600/10000)*100%=6%</p><p>购买B商品的概率 P(B)=(400/10000)*100%=4%</p><p>同时购买A商品和B商品的概率 P(A∩B)=(300/10000)*100%=3%</p><p style="text-align: left;">1.支持度</p><p style="text-align: left;">支持度是指A和B两个商品同时被购买的概率，代表了这个组合的可靠程度。</p><p style="text-align: left;">AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%</p><p style="text-align: left;">在本例中,AB组合的支持度=P(A∩B)=(300/10000) *100%=3%</p><p style="text-align: left;">2.置信度</p><p style="text-align: left;">置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比。代表买了A的用户有多大概率会再买B，既买A产品对B产品产生了多大的影响。</p><p style="text-align: left;">A对B的置信度=同时包含A和B商品的订单数/包含A商品的订单数*100%</p><p style="text-align: left;">在本例中，A对B的置信度=P(A∩B)/P(A)=(300/600)*100%=50%</p><p style="text-align: left;">3.提升度</p><p style="text-align: left;">A对B提升度=A对B的置信度/P(B)，是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B 产品的可能性之比。</p><p style="text-align: left;">它的计算方法是：A对B的置信度/P(B)。提升度和置信度一样，也是一个条件概率。</p><p style="text-align: left;"> 当置信度>P(B)时,A对B的提升度>1，则表示买A再买B的概率大于本身买B的概率,就表示买A对买B带来了提升效果。</p><p style="text-align: left;"> 当置信度＜P(B)时,A对B的提升度<1，则表示买A再买B的概率小于本身买B的概率,就表示买A对买B带来了负向效果。</p><p style="text-align: left;"> 当置信度等于P(B)时,A对B的提升度=1，则代表买A对买B没有影响。</p><p style="text-align: left;">在本例中，A对B的提升度=A对B的置信度/P(B)=50%/4%=12.5，表示商品A对商品B有较大的提升，有较大的搭配价值，建议搭配。</p><p style="text-align: left;">二、利用购物篮分析优化产品推荐</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 推荐算法优化：根据用户的历史购物数据，结合用户画像和行为数据，制定更加精准的推荐算法。通过分析用户的购买行为，了解他们的购物习惯和偏好，为不同的用户提供个性化的推荐。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 动态推荐：根据用户在购物过程中的实时行为，实时调整推荐结果，确保推荐内容与用户需求高度匹配。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 推荐内容丰富度：除了商品推荐外，还可以考虑推荐相关服务、优惠券、套餐等，增加用户购物的丰富度和满意度。</span></p><p style="text-align: left;">三、利用购物篮分析优化产品布局</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 商品分类优化：根据用户的购物习惯和偏好，对商品进行分类和布局，提高用户在搜索和浏览过程中的便利性。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 突出热销商品：通过分析用户的购买数据，了解哪些商品最受用户欢迎，将热销商品放在更加显眼的位置，提高用户的点击率和购买率。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 季节性商品布局：根据季节变化，提前布局相关季节性商品，提高用户在特定季节的购买欲望。</span></p><p style="text-align: left;">四、利用购物篮分析提升客户服务体验</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 客户反馈处理：通过购物篮分析，了解用户对哪些商品、服务和功能存在不满，及时调整和优化，提高用户满意度。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 售后服务优化：针对购买后可能出现的问题和售后需求，提前做好应对措施和解决方案，提高用户的售后服务体验。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 个性化客服：针对不同用户的购物习惯和偏好，提供个性化的客服服务，提高用户对电商平台的信任度和忠诚度。</span></p><p style="text-align: left;">五、利用购物篮分析进行数据驱动的营销策略</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 优惠券策略：根据用户的购物数据和习惯，制定个性化的优惠券策略，提高用户的购买意愿和转化率。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 组合营销：针对用户的购买行为和需求，制定有针对性的组合营销策略，提高用户的购买量和忠诚度。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 社交媒体推广：通过社交媒体平台，利用购物篮分析结果进行精准推广，提高品牌知名度和用户参与度。</span></p><p style="text-align: left;"><br></p>`
|
|
|
);
|
|
|
const list = ref([]);
|
|
|
const combinationValue1 = ref("");
|
|
|
const combinationValue2 = ref("");
|
|
|
const dialogVisible = ref(false);
|
|
|
const knowledgeFlag = ref(false);
|
|
|
const combinationRight = ref(["A—B", "A—C", "A—D", "B—C", "B—D", "C—D"]);
|
|
|
const step1Data = ref([
|
|
|
{
|
|
|
name: "A",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "B",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "C",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "D",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
]);
|
|
|
const fileTable1 = ref([
|
|
|
{
|
|
|
id: "1",
|
|
|
goods1: "A",
|
|
|
goods2: "B",
|
|
|
goods3: "C",
|
|
|
},
|
|
|
{
|
|
|
id: "2",
|
|
|
goods1: "A",
|
|
|
goods2: "C",
|
|
|
goods3: "D",
|
|
|
},
|
|
|
{
|
|
|
id: "3",
|
|
|
goods1: "B",
|
|
|
goods2: "C",
|
|
|
goods3: "",
|
|
|
},
|
|
|
{
|
|
|
id: "4",
|
|
|
goods1: "A",
|
|
|
goods2: "B",
|
|
|
goods3: "D",
|
|
|
},
|
|
|
{
|
|
|
id: "5",
|
|
|
goods1: "C",
|
|
|
goods2: "D",
|
|
|
goods3: "",
|
|
|
},
|
|
|
]);
|
|
|
const step2Data = ref([
|
|
|
{
|
|
|
name: "P（A）",
|
|
|
amount: "3",
|
|
|
account: "800",
|
|
|
},
|
|
|
{ name: "P（B）", amount: "4", account: "1200" },
|
|
|
{ name: "P（C）", amount: "6", account: "600" },
|
|
|
{ name: "P（D）", amount: "7", account: "1400" },
|
|
|
]);
|
|
|
const step3Data = ref([
|
|
|
{
|
|
|
data1: "A-B",
|
|
|
data2: "5900",
|
|
|
},
|
|
|
{
|
|
|
data1: "A-C",
|
|
|
data2: "2400",
|
|
|
},
|
|
|
{
|
|
|
data1: "A-D",
|
|
|
data2: "1100",
|
|
|
},
|
|
|
|
|
|
{
|
|
|
data1: "B-C",
|
|
|
data2: "600",
|
|
|
},
|
|
|
{
|
|
|
data1: "B-D",
|
|
|
data2: "600",
|
|
|
},
|
|
|
{
|
|
|
data1: "C-D",
|
|
|
data2: "600",
|
|
|
},
|
|
|
]);
|
|
|
const step4Data = ref([
|
|
|
{
|
|
|
data1: "A—B",
|
|
|
data2: "5900",
|
|
|
},
|
|
|
{
|
|
|
data1: "A—C",
|
|
|
data2: "2400",
|
|
|
},
|
|
|
{
|
|
|
data1: "A—D",
|
|
|
},
|
|
|
{
|
|
|
data1: "B—C",
|
|
|
data2: "600",
|
|
|
},
|
|
|
{
|
|
|
data1: "B—D",
|
|
|
data2: "600",
|
|
|
},
|
|
|
{
|
|
|
data1: "C—D",
|
|
|
data2: "600",
|
|
|
},
|
|
|
]);
|
|
|
const step5Data = ref([
|
|
|
{
|
|
|
title: "平均值",
|
|
|
},
|
|
|
]);
|
|
|
const step6Data = ref([
|
|
|
{
|
|
|
data1: "1",
|
|
|
data2: "小明",
|
|
|
data3: "4",
|
|
|
data4: "2",
|
|
|
data5: "4",
|
|
|
},
|
|
|
{
|
|
|
data1: "2",
|
|
|
data2: "小红",
|
|
|
data3: "5",
|
|
|
data4: "2",
|
|
|
data5: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "3",
|
|
|
data2: "小李",
|
|
|
data3: "5",
|
|
|
data4: "1",
|
|
|
data5: "1",
|
|
|
},
|
|
|
]);
|
|
|
const rulesTable = ref([
|
|
|
{
|
|
|
data1: "1.重要价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "2.重要发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "3.重要保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "4.重要挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "5.一般价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "6.一般发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "7.一般保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "8.一般挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
]);
|
|
|
const typeData = ref([
|
|
|
{
|
|
|
data1: "A类商品",
|
|
|
data2: "占总销售额的80%，需要重点关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "B类商品",
|
|
|
data2: "占总销售额的10%，给予次要关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "C类商品",
|
|
|
data2: "占总销售额的10%，给予一般关注",
|
|
|
},
|
|
|
]);
|
|
|
const step1Error = ref(0);
|
|
|
const step2Error = ref(0);
|
|
|
const step3Error = ref(0);
|
|
|
const step4Error = ref(0);
|
|
|
const step1AnswerFlag = ref(false);
|
|
|
const step2AnswerFlag = ref(false);
|
|
|
const step3AnswerFlag = ref(false);
|
|
|
const step4AnswerFlag = ref(false);
|
|
|
const errorNum = ref(0);
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
});
|
|
|
onBeforeUnmount(() => {
|
|
|
saveData();
|
|
|
});
|
|
|
const deleteItem = (index) => {
|
|
|
list.value.splice(index, 1);
|
|
|
};
|
|
|
const moveUp = (index, row) => {
|
|
|
console.log("上移", index, row);
|
|
|
if (index > 0) {
|
|
|
const upDate = step2Data.value[index - 1];
|
|
|
step2Data.value.splice(index - 1, 1);
|
|
|
step2Data.value.splice(index, 0, upDate);
|
|
|
} else {
|
|
|
alert("已经是第一条，不可上移");
|
|
|
}
|
|
|
};
|
|
|
const moveDown = (index, row) => {
|
|
|
console.log("下移", index, row);
|
|
|
if (index + 1 === step2Data.value.length) {
|
|
|
alert("已经是最后一条，不可下移");
|
|
|
} else {
|
|
|
const downDate = step2Data.value[index + 1];
|
|
|
step2Data.value.splice(index + 1, 1);
|
|
|
step2Data.value.splice(index, 0, downDate);
|
|
|
}
|
|
|
};
|
|
|
const addCombination = () => {
|
|
|
if (list.value[0] === "-") {
|
|
|
list.value = [];
|
|
|
}
|
|
|
// list.value = [];
|
|
|
if (combinationValue1.value == "" || combinationValue2.vlaue == "") {
|
|
|
proxy.$modal.msgError("请选择组合");
|
|
|
return;
|
|
|
}
|
|
|
list.value.push(combinationValue1.value + "—" + combinationValue2.value);
|
|
|
};
|
|
|
const step1Submit = () => {
|
|
|
step1Error.value = 0;
|
|
|
// console.log(isArrayContained(list.value, combinationRight.value)); // 输出：true
|
|
|
if (!isArrayContained(list.value, combinationRight.value)) {
|
|
|
step1Error.value = 1;
|
|
|
comListError.value = true;
|
|
|
} else {
|
|
|
comListError.value = false;
|
|
|
}
|
|
|
console.log("错误数", step1Error.value);
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step1AnswerFlag.value = true;
|
|
|
};
|
|
|
function isArrayContained(arr1, arr2) {
|
|
|
return arr2.every((element) => arr1.includes(element));
|
|
|
}
|
|
|
const step2Submit = () => {
|
|
|
// console.log(0);
|
|
|
step2Error.value = 0;
|
|
|
for (let i in step2Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step2Data.value[i].params) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step2Data.value[0].params && step2Data.value[0].params !== "60") {
|
|
|
step2Error.value++;
|
|
|
step2Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[1].params && step2Data.value[1].params !== "60") {
|
|
|
step2Error.value++;
|
|
|
step2Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[2].params && step2Data.value[2].params !== "80") {
|
|
|
step2Error.value++;
|
|
|
step2Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[3].params && step2Data.value[3].params !== "60") {
|
|
|
step2Error.value++;
|
|
|
step2Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[3].isError = false;
|
|
|
}
|
|
|
console.log(step2Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step2AnswerFlag.value = true;
|
|
|
};
|
|
|
const step3Submit = () => {
|
|
|
step3Error.value = 0;
|
|
|
for (let i in step3Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step3Data.value[i].params1 || !step3Data.value[i].params2 || !step3Data.value[i].params3) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "40" && step3Data.value[0].params1 !== "40.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[0].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "66.67") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[0].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params3 && step3Data.value[0].params3 !== "111.11") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[0].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "20" && step3Data.value[1].params1 !== "20.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[1].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "33.33") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[1].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params3 && step3Data.value[1].params3 !== "41.67") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[1].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "40" && step3Data.value[2].params1 !== "40.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[2].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "60.00" && step3Data.value[2].params2 !== "60") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[2].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params3 && step3Data.value[2].params3 !== "100.00" && step3Data.value[2].params3 !== "100") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[2].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "20" && step3Data.value[3].params1 !== "20.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[3].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "33.33") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[3].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params3 && step3Data.value[3].params3 !== "41.67") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[3].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params1 && step3Data.value[4].params1 !== "20" && step3Data.value[4].params1 !== "20.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[4].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params2 && step3Data.value[4].params2 !== "33.33") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[4].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params3 && step3Data.value[4].params3 !== "55.56") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[4].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params1 && step3Data.value[5].params1 !== "40" && step3Data.value[5].params1 !== "40.00") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[5].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params2 && step3Data.value[5].params2 !== "50.00" && step3Data.value[5].params2 !== "50") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[5].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params3 && step3Data.value[5].params3 !== "83.33") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[5].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError3 = false;
|
|
|
}
|
|
|
console.log(step3Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step3AnswerFlag.value = true;
|
|
|
// console.log(999);
|
|
|
};
|
|
|
const step4Submit = () => {
|
|
|
step4Error.value = 0;
|
|
|
for (let i in step4Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step4Data.value[i].params) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step4Data.value[0].params && step4Data.value[0].params !== "提升效果") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[1].params && step4Data.value[1].params !== "负向效果") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[2].params && step4Data.value[2].params !== "没有影响") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[3].params && step4Data.value[3].params !== "负向效果") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[3].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[4].params && step4Data.value[4].params !== "负向效果") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[4].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[4].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[5].params && step4Data.value[5].params !== "负向效果") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[5].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[5].isError = false;
|
|
|
}
|
|
|
// console.log(666);
|
|
|
console.log(step4Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step4AnswerFlag.value = true;
|
|
|
};
|
|
|
const saveData = () => {
|
|
|
const params = {
|
|
|
stepFiveA: list.value.join(","),
|
|
|
stepFiveB: step2Data.value[0].params,
|
|
|
stepFiveC: step2Data.value[1].params,
|
|
|
stepFiveD: step2Data.value[2].params,
|
|
|
stepSixA: step2Data.value[3].params,
|
|
|
stepSixB: step3Data.value[0].params1,
|
|
|
stepSixC: step3Data.value[0].params2,
|
|
|
stepSixD: step3Data.value[0].params3,
|
|
|
stepSevenA: step3Data.value[1].params1,
|
|
|
stepSevenB: step3Data.value[1].params2,
|
|
|
stepSevenC: step3Data.value[1].params3,
|
|
|
stepSevenD: step3Data.value[2].params1,
|
|
|
stepEightA: step3Data.value[2].params2,
|
|
|
stepEightB: step3Data.value[2].params3,
|
|
|
stepEightC: step3Data.value[3].params1,
|
|
|
stepEightD: step3Data.value[3].params2,
|
|
|
stepNineA: step3Data.value[3].params3,
|
|
|
stepNineB: step3Data.value[4].params1,
|
|
|
stepNineC: step3Data.value[4].params2,
|
|
|
stepNineD: step3Data.value[4].params3,
|
|
|
stepTenA: step3Data.value[5].params1,
|
|
|
stepTenB: step3Data.value[5].params2,
|
|
|
stepTenC: step3Data.value[5].params3,
|
|
|
stepTenD: step4Data.value[0].params,
|
|
|
stepElevenA: step4Data.value[1].params,
|
|
|
stepOneA: step4Data.value[2].params,
|
|
|
stepOneB: step4Data.value[3].params,
|
|
|
stepOneC: step4Data.value[4].params,
|
|
|
stepOneD: step4Data.value[5].params,
|
|
|
// stepTwoA: step6Data.value[0].params2,
|
|
|
// stepTwoB: step6Data.value[0].params3,
|
|
|
// stepTwoC: step6Data.value[1].params1,
|
|
|
// stepThreeA: step6Data.value[1].params2,
|
|
|
// stepThreeB: step6Data.value[1].params3,
|
|
|
// stepThreeC: step6Data.value[2].params1,
|
|
|
// stepThreeD: step6Data.value[2].params2,
|
|
|
// stepFourA: step6Data.value[2].params3,
|
|
|
// stepFourB: step7Data.value[0].params,
|
|
|
// stepFourC: step7Data.value[1].params,
|
|
|
// stepFourD: step7Data.value[2].params,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "购物篮分析",
|
|
|
...params,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const saveDataSubmit = () => {
|
|
|
const params = {
|
|
|
stepFiveA: list.value.join(","),
|
|
|
stepFiveB: step2Data.value[0].params,
|
|
|
stepFiveC: step2Data.value[1].params,
|
|
|
stepFiveD: step2Data.value[2].params,
|
|
|
stepSixA: step2Data.value[3].params,
|
|
|
stepSixB: step3Data.value[0].params1,
|
|
|
stepSixC: step3Data.value[0].params2,
|
|
|
stepSixD: step3Data.value[0].params3,
|
|
|
stepSevenA: step3Data.value[1].params1,
|
|
|
stepSevenB: step3Data.value[1].params2,
|
|
|
stepSevenC: step3Data.value[1].params3,
|
|
|
stepSevenD: step3Data.value[2].params1,
|
|
|
stepEightA: step3Data.value[2].params2,
|
|
|
stepEightB: step3Data.value[2].params3,
|
|
|
stepEightC: step3Data.value[3].params1,
|
|
|
stepEightD: step3Data.value[3].params2,
|
|
|
stepNineA: step3Data.value[3].params3,
|
|
|
stepNineB: step3Data.value[4].params1,
|
|
|
stepNineC: step3Data.value[4].params2,
|
|
|
stepNineD: step3Data.value[4].params3,
|
|
|
stepTenA: step3Data.value[5].params1,
|
|
|
stepTenB: step3Data.value[5].params2,
|
|
|
stepTenC: step3Data.value[5].params3,
|
|
|
stepTenD: step4Data.value[0].params,
|
|
|
stepElevenA: step4Data.value[1].params,
|
|
|
stepOneA: step4Data.value[2].params,
|
|
|
stepOneB: step4Data.value[3].params,
|
|
|
stepOneC: step4Data.value[4].params,
|
|
|
stepOneD: step4Data.value[5].params,
|
|
|
// stepTwoA: step6Data.value[0].params2,
|
|
|
// stepTwoB: step6Data.value[0].params3,
|
|
|
// stepTwoC: step6Data.value[1].params1,
|
|
|
// stepThreeA: step6Data.value[1].params2,
|
|
|
// stepThreeB: step6Data.value[1].params3,
|
|
|
// stepThreeC: step6Data.value[2].params1,
|
|
|
// stepThreeD: step6Data.value[2].params2,
|
|
|
// stepFourA: step6Data.value[2].params3,
|
|
|
// stepFourB: step7Data.value[0].params,
|
|
|
// stepFourC: step7Data.value[1].params,
|
|
|
// stepFourD: step7Data.value[2].params,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "购物篮分析",
|
|
|
...params,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const getData = () => {
|
|
|
portraitModel
|
|
|
.getData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "购物篮分析",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.data.stepFiveA) {
|
|
|
list.value = res.data.stepFiveA.split(",");
|
|
|
}
|
|
|
|
|
|
step2Data.value[0].params = res.data.stepFiveB;
|
|
|
step2Data.value[1].params = res.data.stepFiveC;
|
|
|
step2Data.value[2].params = res.data.stepFiveD;
|
|
|
step2Data.value[3].params = res.data.stepSixA;
|
|
|
step3Data.value[0].params1 = res.data.stepSixB;
|
|
|
step3Data.value[0].params2 = res.data.stepSixC;
|
|
|
step3Data.value[0].params3 = res.data.stepSixD;
|
|
|
step3Data.value[1].params1 = res.data.stepSevenA;
|
|
|
step3Data.value[1].params2 = res.data.stepSevenB;
|
|
|
step3Data.value[1].params3 = res.data.stepSevenC;
|
|
|
step3Data.value[2].params1 = res.data.stepSevenD;
|
|
|
step3Data.value[2].params2 = res.data.stepEightA;
|
|
|
step3Data.value[2].params3 = res.data.stepEightB;
|
|
|
step3Data.value[3].params1 = res.data.stepEightC;
|
|
|
step3Data.value[3].params2 = res.data.stepEightD;
|
|
|
step3Data.value[3].params3 = res.data.stepNineA;
|
|
|
step3Data.value[4].params1 = res.data.stepNineB;
|
|
|
step3Data.value[4].params2 = res.data.stepNineC;
|
|
|
step3Data.value[4].params3 = res.data.stepNineD;
|
|
|
step3Data.value[5].params1 = res.data.stepTenA;
|
|
|
step3Data.value[5].params2 = res.data.stepTenB;
|
|
|
step3Data.value[5].params3 = res.data.stepTenC;
|
|
|
step4Data.value[0].params = res.data.stepTenD;
|
|
|
step4Data.value[1].params = res.data.stepElevenA;
|
|
|
step4Data.value[2].params = res.data.stepOneA;
|
|
|
step4Data.value[3].params = res.data.stepOneB;
|
|
|
step4Data.value[4].params = res.data.stepOneC;
|
|
|
step4Data.value[5].params = res.data.stepOneD;
|
|
|
// step6Data.value[0].params2 = res.data.stepTwoA;
|
|
|
// step6Data.value[0].params3 = res.data.stepTwoB;
|
|
|
// step6Data.value[1].params1 = res.data.stepTwoC;
|
|
|
// step6Data.value[1].params2 = res.data.stepThreeA;
|
|
|
// step6Data.value[1].params3 = res.data.stepThreeB;
|
|
|
// step6Data.value[2].params1 = res.data.stepThreeC;
|
|
|
// step6Data.value[2].params2 = res.data.stepThreeD;
|
|
|
// step6Data.value[2].params3 = res.data.stepFourA;
|
|
|
// step7Data.value[0].params = res.data.stepFourB;
|
|
|
// step7Data.value[1].params = res.data.stepFourC;
|
|
|
// step7Data.value[2].params = res.data.stepFourD;
|
|
|
// console.log(list.value);
|
|
|
//回显答案
|
|
|
if (res.data.subState & (res.data.subState == 1)) {
|
|
|
showAnswerFlag.value = true;
|
|
|
if (!isArrayContained(list.value, combinationRight.value)) {
|
|
|
comListError.value = true;
|
|
|
} else {
|
|
|
comListError.value = false;
|
|
|
}
|
|
|
|
|
|
if (step2Data.value[0].params && step2Data.value[0].params !== "60") {
|
|
|
step2Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[1].params && step2Data.value[1].params !== "60") {
|
|
|
step2Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[2].params && step2Data.value[2].params !== "80") {
|
|
|
step2Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step2Data.value[3].params && step2Data.value[3].params !== "60") {
|
|
|
step2Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step2Data.value[3].isError = false;
|
|
|
}
|
|
|
|
|
|
if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "40" && step3Data.value[0].params1 !== "40.00") {
|
|
|
step3Data.value[0].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "66.67") {
|
|
|
step3Data.value[0].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params3 && step3Data.value[0].params3 !== "111.11") {
|
|
|
step3Data.value[0].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "20" && step3Data.value[1].params1 !== "20.00") {
|
|
|
step3Data.value[1].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "33.33") {
|
|
|
step3Data.value[1].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params3 && step3Data.value[1].params3 !== "41.67") {
|
|
|
step3Data.value[1].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "40" && step3Data.value[2].params1 !== "40.00") {
|
|
|
step3Data.value[2].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "60.00" && step3Data.value[2].params2 !== "60") {
|
|
|
step3Data.value[2].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params3 && step3Data.value[2].params3 !== "100.00" && step3Data.value[2].params3 !== "100") {
|
|
|
step3Data.value[2].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "20" && step3Data.value[3].params1 !== "20.00") {
|
|
|
step3Data.value[3].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "33.33") {
|
|
|
step3Data.value[3].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params3 && step3Data.value[3].params3 !== "41.67") {
|
|
|
step3Data.value[3].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params1 && step3Data.value[4].params1 !== "20" && step3Data.value[4].params1 !== "20.00") {
|
|
|
step3Data.value[4].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params2 && step3Data.value[4].params2 !== "33.33") {
|
|
|
step3Data.value[4].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[4].params3 && step3Data.value[4].params3 !== "55.56") {
|
|
|
step3Data.value[4].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[4].isError3 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params1 && step3Data.value[5].params1 !== "40" && step3Data.value[5].params1 !== "40.00") {
|
|
|
step3Data.value[5].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params2 && step3Data.value[5].params2 !== "50.00" && step3Data.value[5].params2 !== "50") {
|
|
|
step3Data.value[5].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[5].params3 && step3Data.value[5].params3 !== "83.33") {
|
|
|
step3Data.value[5].isError3 = true;
|
|
|
} else {
|
|
|
step3Data.value[5].isError3 = false;
|
|
|
}
|
|
|
|
|
|
if (step4Data.value[0].params && step4Data.value[0].params !== "提升效果") {
|
|
|
step4Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[1].params && step4Data.value[1].params !== "负向效果") {
|
|
|
step4Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[2].params && step4Data.value[2].params !== "没有影响") {
|
|
|
step4Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[3].params && step4Data.value[3].params !== "负向效果") {
|
|
|
step4Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[3].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[4].params && step4Data.value[4].params !== "负向效果") {
|
|
|
step4Data.value[4].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[4].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[5].params && step4Data.value[5].params !== "负向效果") {
|
|
|
step4Data.value[5].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[5].isError = false;
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const downloadData = () => {
|
|
|
// portraitModel
|
|
|
// .downloadDataByBasket({})
|
|
|
// .then((res) => {
|
|
|
// // console.log(res,'--');
|
|
|
// const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
// downBlobFile(`案例数据-购物篮分析`, blob);
|
|
|
// })
|
|
|
// .catch((error) => {});
|
|
|
window.open(baseUrl + "/api/downDataByUserPortrait/analysisByShopBasket");
|
|
|
};
|
|
|
const submitData = () => {
|
|
|
// console.log("asdasdasdsdsds");
|
|
|
if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
|
|
|
proxy.$modal.msgError("请先完成所有步骤！");
|
|
|
return;
|
|
|
}
|
|
|
errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value;
|
|
|
console.log(errorNum.value, "总错误次数");
|
|
|
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) => {});
|
|
|
};
|
|
|
const retrain = () => {
|
|
|
showAnswerFlag.value = false;
|
|
|
// console.log(66);
|
|
|
// portraitModel
|
|
|
// .retrain({
|
|
|
// userId: JSON.parse(getUserInfo()).userId,
|
|
|
// module: "购物篮分析",
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
proxy.$modal.msgSuccess("重新实训成功");
|
|
|
list.value = ["-"];
|
|
|
for (let i in step2Data.value) {
|
|
|
step2Data.value[i].params = "";
|
|
|
}
|
|
|
for (let i in step3Data.value) {
|
|
|
step3Data.value[i].params1 = "";
|
|
|
step3Data.value[i].params2 = "";
|
|
|
step3Data.value[i].params3 = "";
|
|
|
}
|
|
|
for (let i in step4Data.value) {
|
|
|
step4Data.value[i].params = "";
|
|
|
}
|
|
|
// step2Select1.value = "";
|
|
|
// step2Select2.value = "";
|
|
|
// step2Select3.value = "";
|
|
|
// step2Select4.value = "";
|
|
|
// step2Select5.value = "";
|
|
|
// step3Select1.value = "";
|
|
|
// step3Select2.value = "";
|
|
|
// })
|
|
|
// .catch((error) => {});
|
|
|
};
|
|
|
defineExpose({
|
|
|
submitData,
|
|
|
retrain,
|
|
|
// practicalTraining,
|
|
|
});
|
|
|
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;
|
|
|
background: #fff8ee;
|
|
|
border-radius: 10px;
|
|
|
// border: 1px solid #0052a3;
|
|
|
font-size: 12px;
|
|
|
margin-top: 10px;
|
|
|
img {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.line {
|
|
|
width: 1400px;
|
|
|
height: 1px;
|
|
|
border: 1px solid #0452c6;
|
|
|
opacity: 0.5;
|
|
|
margin-top: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.addBtn {
|
|
|
background-color: #6af5fb;
|
|
|
color: #080138;
|
|
|
height: 31px;
|
|
|
border: 1px solid #6af5fb;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
.comList {
|
|
|
display: flex;
|
|
|
ul {
|
|
|
text-align: center;
|
|
|
list-style-type: none;
|
|
|
border: 1px solid #7190d4;
|
|
|
border-bottom: none;
|
|
|
width: 124px;
|
|
|
padding: 0;
|
|
|
// padding: 0;
|
|
|
margin: 0;
|
|
|
p {
|
|
|
width: 122px;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
background: #6e70f0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
li {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
line-height: 30px;
|
|
|
width: 122px;
|
|
|
height: 30px;
|
|
|
// background: #003b75;
|
|
|
background: #fff;
|
|
|
border-bottom: 1px solid #7190d4;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
// ::v-deep .el-table tr {
|
|
|
// background-color: #002652 !important;
|
|
|
// color: #fff;
|
|
|
// }
|
|
|
::v-deep .el-table tr {
|
|
|
background-color: #fff !important;
|
|
|
color: #000;
|
|
|
}
|
|
|
/* 将悬停背景色改为红色 */
|
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
background-color: #f5f7fa !important;
|
|
|
}
|
|
|
::v-deep .el-table td {
|
|
|
padding-top: 4px;
|
|
|
padding-bottom: 4px;
|
|
|
}
|
|
|
</style>
|