|
|
<template>
|
|
|
<div class="app-container2">
|
|
|
<div class="Robot-learning">
|
|
|
<div class="left">
|
|
|
<div class="gdialog">
|
|
|
|
|
|
<el-scrollbar height="620px" style="height: 93%;">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<div class="TaskBackground">
|
|
|
<span >任务背景</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<p style="color:#FFFFFF !important">假设我们要构建一个决策树来预测一个人是否会购买某个产品。我们将使用以下特征来进行预测：</p>
|
|
|
<p class="info"><img src="@/assets/images/szjj/年龄.png"/>年龄：年龄范围在18岁到65岁之间</p>
|
|
|
<p class="info"><img src="@/assets/images/szjj/性别.png"/>性别：男性或女性</p>
|
|
|
<p class="info"><img src="@/assets/images/szjj/收入.png"/>收入：收入范围在0到100,000之间</p>
|
|
|
<p style="color:#FFFFFF !important">我们有一个包含以下数据的训练集：</p>
|
|
|
<div class="tabback">
|
|
|
<el-table :data="TrainingSet" style="width: 100%" stripe>
|
|
|
<el-table-column type="index" label="编号" align="center" width="150"/>
|
|
|
<el-table-column prop="age" label="年龄" align="center" />
|
|
|
<el-table-column prop="sex" label="性别" align="center" />
|
|
|
<el-table-column prop="income" label="收入" align="center" />
|
|
|
<el-table-column prop="purchase" label="购买" align="center" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<p style="color:#FFFFFF !important">现在，我们将使用这些数据来构建一个决策树模型。<br/>
|
|
|
我们可以使用信息增益或基尼不纯度等指标来选择最佳特征。在这个例子中，我们选择使用信息增益。计算结果显示应该选择性别作为根节点。<br/><br/>
|
|
|
接下来，我们根据性别的取值（男性或女性）将数据集分割成两个子集。<br/>
|
|
|
对于男性子集：
|
|
|
</p>
|
|
|
<div class="tabback tab2">
|
|
|
<el-table :data="MaleSubset" style="width: 100%" stripe>
|
|
|
<el-table-column type="index" label="编号" align="center" width="150"/>
|
|
|
<el-table-column prop="age" label="年龄" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.age" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="income" label="收入" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.income" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="purchase" label="购买" align="center">
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.purchase" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<el-button @click="segmentation(MaleSubset,1,'男')" class="LeftbuttonS">分割</el-button>
|
|
|
<p style="color:#FFFFFF !important">对于女性子集：</p>
|
|
|
<div class="tabback tab2">
|
|
|
<el-table :data="FemaleSubset" style="width: 100%" stripe>
|
|
|
<el-table-column type="index" label="编号" align="center" width="150"/>
|
|
|
<el-table-column prop="age" label="年龄" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.age" placeholder="" ></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="income" label="收入" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.income" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="purchase" label="购买" align="center">
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.purchase" placeholder="" ></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<el-button @click="segmentation(FemaleSubset,2,'女')" :disabled="state<2" class="LeftbuttonS">分割</el-button>
|
|
|
<p style="color:#FFFFFF !important"> 对于男性子集，我们可以看到购买的结果是"是"和"否"都有，所以我们需要进一步划分。我们选择年龄作为下一个节点。<br/>
|
|
|
对于年龄的取值（小于等于30岁和大于30岁）：<br/>
|
|
|
对于小于等于30岁的子集：
|
|
|
</p>
|
|
|
<div class="tabback tab3">
|
|
|
<el-table :data="greaterThan" style="width: 100%" stripe>
|
|
|
<el-table-column type="index" label="编号" align="center" width="150"/>
|
|
|
<el-table-column prop="income" label="收入" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model="row.income" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="purchase" label="购买" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.purchase" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<el-button @click="divide(greaterThan,3)" :disabled="state<3" class="LeftbuttonS">分割</el-button>
|
|
|
<p style="color:#FFFFFF !important">对于大于30岁的子集：</p>
|
|
|
<div class="tabback tab3">
|
|
|
<el-table :data="lessThan" style="width: 100%" stripe>
|
|
|
<el-table-column type="index" label="编号" align="center" width="150"/>
|
|
|
<el-table-column prop="income" label="收入" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.income" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="purchase" label="购买" align="center" >
|
|
|
<template #default="{row}">
|
|
|
<el-input v-model.trim="row.purchase" placeholder=""></el-input>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<el-button @click="divide(lessThan ,4)" :disabled="state<4" class="LeftbuttonS">分割</el-button>
|
|
|
<p style="color:#FFFFFF !important">
|
|
|
对于小于等于30岁的子集，购买的结果都是"否"，所以我们不需要再进行划分。<br/>
|
|
|
对于大于30岁的子集，购买的结果都是"是"，所以我们不需要再进行划分。<br/>
|
|
|
对于女性子集，购买的结果都是"是"，所以我们不需要再进行划分。<br/>
|
|
|
请根据上述过程绘制决策树：
|
|
|
</p>
|
|
|
<div class="DecisionTree">
|
|
|
<div class="titleimg">
|
|
|
<img src="@/assets/images/szjj/性别(2).png" alt="">
|
|
|
</div>
|
|
|
<div class="titleimg sex">
|
|
|
<span class="tetx"> <img src="@/assets/images/szjj/性别(1).png" alt="">性别</span>
|
|
|
</div>
|
|
|
<div class="information">
|
|
|
<div class="box">
|
|
|
<span class="tetx"><img src="@/assets/images/szjj/年龄1.png" alt="">年齡</span>
|
|
|
</div>
|
|
|
<div class="box" @click="Decisiontreepurchase('女','购买')">
|
|
|
<span class="tetx"><img src="@/assets/images/szjj/购买2.png" alt="">购买</span>
|
|
|
</div>
|
|
|
<div class="ipt">
|
|
|
<el-select
|
|
|
v-model="Conditions.sex"
|
|
|
size="large">
|
|
|
<el-option label="男" value="男"/>
|
|
|
<el-option label="女" value="女"/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="Consumption">
|
|
|
<div class="box1" @click="Decisiontreepurchase('男','购买')">
|
|
|
<span ><img src="@/assets/images/szjj/购买(1).png" alt="" >购买</span>
|
|
|
</div>
|
|
|
<div class="box1" @click="Decisiontreepurchase('男','不购买')">
|
|
|
<span ><img src="@/assets/images/szjj/减少.png" alt="">不购买</span>
|
|
|
</div>
|
|
|
<div class="ipt1">
|
|
|
<el-select
|
|
|
v-model="Conditions.age"
|
|
|
size="large">
|
|
|
<el-option label="大于三十" value="是"/>
|
|
|
<el-option label="小于等于三十" value="否"/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<p style="color:#FFFFFF !important">上述例子是决策树相关的一个简单案例，实际中决策树可以用于金融领域的精准营销，利用大数据建模，分析客户年龄、收入、职业、历史信贷记录等信息，锁定哪些客户群里更有可能发生信贷风险，<br/>
|
|
|
哪些属于优质客户，更可能购买产品和服务等。<br/>
|
|
|
来源：https://zhuanlan.zhihu.com/p/651602495
|
|
|
</p>
|
|
|
</el-scrollbar>
|
|
|
<div class="dialog-footer" style="margin-top: 7px;">
|
|
|
<el-button class="tj" @click="submit">提交任务</el-button>
|
|
|
<el-button class="tj" type="primary" @click="restart">重新开始</el-button>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<span @click="robotlearningVisible=true"></span>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
custom-class="gdialog"
|
|
|
v-model="robotlearningVisible"
|
|
|
title="机器学习"
|
|
|
width="66%"
|
|
|
:before-close="handleCole"
|
|
|
>
|
|
|
<el-scrollbar height="600px">
|
|
|
|
|
|
<p>
|
|
|
机器学习是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。<br/><br/>
|
|
|
它是人工智能核心，是使计算机具有智能的根本途径。<br/>
|
|
|
机器学习是计算机科学的一个分支，它允许计算机在不被明确告知这些模式是什么的情况下，从数据中自动推断出模式。这些推断通常基于使用算法来自动检查数据的统计属性，并创建数学模型来表示不同数量之间的关系。<br/><br/>
|
|
|
让我们将其与传统计算进行对比，传统计算依赖于确定性系统，其中我们明确地告诉计算机一组规则来执行特定任务。这种计算机编程方法被称为基于规则的。机器学习与基于规则的编程的不同之处在于，它能够自己推断出这些规则。<br/><br/>
|
|
|
假设你是一名银行经理，你想弄清楚一个贷款申请人是否有可能拖欠贷款。在基于规则的方法中，银行经理(或其他专家)将明确地告诉计算机，如果申请人的信用评分低于阈值，则拒绝该申请。<br/><br/>
|
|
|
然而，机器学习算法只需要获取客户信用评分和贷款结果的历史数据，然后自己计算出这个阈值应该是多少。在这样做的过程中，机器从历史数据中学习并创建自己的规则。<br/><br/>
|
|
|
当然，这只是对机器学习的介绍，因为现实世界的机器学习模型通常比简单的阈值复杂得多。尽管如此，这仍然是一个很好的例子，说明机器学习可以有多么强大。<br/><br/>
|
|
|
只要您拥有相关数据，任何组织KPI都可以进行优化。例如，给定一个历史客户数据集，您可以预测当前的哪些客户有离开的危险，这样您就可以在流失发生之前阻止它。<br/><br/>
|
|
|
机器学习方法已经取得了巨大的进步，而且可以完成的远不止于此。从自动驾驶汽车到语音识别，再到标记收件箱垃圾邮件的自动电子邮件过滤系统，机器学习算法构成了我们今天所依赖的许多技术进步的基础。<br/><br/>
|
|
|
机器学习算法通常分为三大类：监督学习、无监督学习和强化学习。接下来，让我们了解一下不同类型的机器学习算法以及它们可以解决的特定类型的问题。<br/><br/>
|
|
|
<span class="headline">1 监督学习</span> <br/><br/>
|
|
|
监督学习指的是一类算法，在这种算法中，机器学习模型被赋予一组数据，这些数据带有我们感兴趣的数据的明确标签(这个标签通常被称为响应变量或目标变量)。半监督学习使用标记和未标记数据的组合来训练人工智能模型。<br/><br/>
|
|
|
如果处理的是无标签的数据，则需要对数据打上标签。打标签是对数据实例进行注释以帮助训练机器学习模型的过程。打标签通常由人工完成，这可能既昂贵又耗时。然而，有一些方法可以使打标签过程自动化。<br/><br/>
|
|
|
监督学习的一个很好的例子是我们前面考虑的贷款申请场景。在这里，我们有过去贷款申请人的信用评分(以及潜在的收入水平、年龄等)的历史数据，以及明确的标签，这些标签告诉我们这些申请人是否拖欠贷款。<br/><br/>
|
|
|
监督学习算法可以进一步细分为回归和分类。这个差异是指我们的目标变量的类型。如果目标是在几个离散的类别之间进行选择——例如，申请人是否拖欠贷款，这是一张猫、狗还是人的照片，等等——那么这个问题就被称为分类，因为我们正在试图给数据确定所属的类别。然而，如果我们的目标变量是连续的，那么这个问题就被称为回归。例如，根据卧室的数量和位置来预测房子的价格。<br/><br/>
|
|
|
常见的监督学习算法有线性回归、逻辑回归、支持向量机、决策树等<br/><br/>
|
|
|
<span class="headline">2 无监督学习</span> <br/><br/>
|
|
|
在无监督学习问题中，我们得到的数据没有标签，我们只是在寻找模式。常见的无监督学习算法有聚类分析、关联规则挖掘、降维和特征提取等。例如，给定亚马逊客户的购买历史，我们能否识别任何集群(类似客户的组)?<br/><br/>
|
|
|
在这种情况下，即使我们没有明确的、确定的数据，关于一个人的兴趣是什么，只要确定一个特定的客户群体购买了类似的商品，我们就可以根据集群中的其他人也购买了什么来进行购买推荐。类似的系统是亚马逊的“你可能也会感兴趣”推荐引擎的核心。<br/><br/>
|
|
|
K-means聚类是一种聚类模型，它根据客户行为模式的相似性将客户群体分配到不同的集群或组中。在技术层面上，它的工作原理是找到每个集群的质心，然后将其用作集群的初始平均值。然后根据新客户与集群中其他成员的相似性将其分配到集群中。<br/><br/>
|
|
|
此外，一旦我们确定了集群，我们就可以研究它们的特征。例如，假设我们看到一个给定的集群正在购买许多电子游戏。在这种情况下，我们可以有根据地猜测这群用户是游戏玩家。一旦我们完成了这种形式的分析，我们甚至可以使用无监督学习的标签来创建监督学习模型，例如，让我们能够预测一个25岁的玩家与一个50岁的钓鱼爱好者相比，可能会在我们这里花多少钱。<br/><br/>
|
|
|
<span class="headline">3 强化学习</span><br/><br/>
|
|
|
强化学习是一类机器学习算法，我们分配计算机代理执行某些任务，而不给它确切的指导。相反，我们允许计算机做出自己的选择，并根据这些选择是否会导致我们想要的结果，我们分配惩罚和奖励。我们多次重复这个过程，让计算机通过试错和反复迭代来学习做某事的最佳方式。<br/><br/>
|
|
|
有趣的是，玩游戏是强化学习显示出最惊人结果的应用。谷歌臭名昭著的AlphaGo模型就是利用强化学习建立起来的，它甚至击败了排名最高的人类围棋选手。此后，谷歌将同样的技术扩展到了AlphaZero，它是最初的AlphaGo的继承者，被国际象棋选手用作确定最佳策略的参考。<br/><br/>
|
|
|
</p>
|
|
|
</el-scrollbar>
|
|
|
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import * as commonality from "@/api/commonality.js";
|
|
|
// import {getUserId} from "@/utils/auth.js";
|
|
|
import { getUserInfo } from '@/utils/auth'
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
const robotlearningVisible = ref(false);
|
|
|
const TrainingSet=ref([
|
|
|
{
|
|
|
age:'25',
|
|
|
sex:'男',
|
|
|
income:'30000',
|
|
|
purchase:'否'
|
|
|
},
|
|
|
{
|
|
|
age:'35',
|
|
|
sex:'女',
|
|
|
income:'40000',
|
|
|
purchase:'是'
|
|
|
},
|
|
|
{
|
|
|
age:'45',
|
|
|
sex:'女',
|
|
|
income:'80000',
|
|
|
purchase:'是'
|
|
|
},
|
|
|
{
|
|
|
age:'20',
|
|
|
sex:'男',
|
|
|
income:'10000',
|
|
|
purchase:'否'
|
|
|
},
|
|
|
{
|
|
|
age:'55',
|
|
|
sex:'男',
|
|
|
income:'60000',
|
|
|
purchase:'是'
|
|
|
},
|
|
|
{
|
|
|
age:'60',
|
|
|
sex:'女',
|
|
|
income:'90000',
|
|
|
purchase:'是'
|
|
|
},
|
|
|
{
|
|
|
age:'30',
|
|
|
sex:'男',
|
|
|
income:'50000',
|
|
|
purchase:'否'
|
|
|
},{
|
|
|
age:'40',
|
|
|
sex:'女',
|
|
|
income:'75000',
|
|
|
purchase:'是'
|
|
|
}
|
|
|
])
|
|
|
const MaleSubset=ref([
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
])
|
|
|
const FemaleSubset=ref([
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
])
|
|
|
const greaterThan=ref([
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
])
|
|
|
const lessThan=ref([
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
}
|
|
|
])
|
|
|
const IncorrectScoring=ref(0)
|
|
|
const state=ref(1)
|
|
|
const Conditions=ref({
|
|
|
sex:'',
|
|
|
age:'',
|
|
|
})
|
|
|
const restartStatus=ref(false)
|
|
|
// 分割
|
|
|
const segmentation = (data,id,sex) => {
|
|
|
if(sex=='男'){
|
|
|
console.log(data,"data");
|
|
|
}
|
|
|
const women = TrainingSet.value.filter(item => item.sex === sex);
|
|
|
let isConsistent =null
|
|
|
let isVacancy =null
|
|
|
if (women.length === 0) {
|
|
|
console.log('没有女性数据');
|
|
|
return;
|
|
|
}
|
|
|
isVacancy=data.every(val=>!val.age || !val.income || !val.purchase)
|
|
|
if(isVacancy){
|
|
|
proxy.$modal.msgWarning('分割子集不能为空!')
|
|
|
return
|
|
|
}
|
|
|
data.forEach((item, outerIndex) => {
|
|
|
const dataItem = item; // 为清晰起见，使用一个新变量
|
|
|
isConsistent = women.some(womanItem => {
|
|
|
// 如果找到一个匹配的women项，返回true
|
|
|
return (
|
|
|
womanItem.sex===sex&&
|
|
|
dataItem.age === womanItem.age &&
|
|
|
dataItem.income === womanItem.income &&
|
|
|
dataItem.purchase === womanItem.purchase
|
|
|
);
|
|
|
});
|
|
|
// 只比较第四个元素
|
|
|
|
|
|
});
|
|
|
|
|
|
if (!isConsistent) {
|
|
|
if(id==1){
|
|
|
IncorrectScoring.value=1
|
|
|
}else if(id==2){
|
|
|
IncorrectScoring.value=2
|
|
|
}
|
|
|
proxy.$modal.msgError('分割错误');
|
|
|
// 在这里可以添加更多逻辑，比如显示更具体的错误消息
|
|
|
} else {
|
|
|
proxy.$modal.msgSuccess('分割成功');
|
|
|
if(id==1){
|
|
|
state.value=2
|
|
|
}else if(id==2){
|
|
|
state.value=3
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
const divide=(data,id)=>{
|
|
|
let women=null
|
|
|
if(id==3){
|
|
|
women = TrainingSet.value.filter(item => item.age <= '30');
|
|
|
}else if(id==4){
|
|
|
women = TrainingSet.value.filter(item => item.age > '30');
|
|
|
}
|
|
|
let isConsistent =null
|
|
|
data.forEach((item, outerIndex) => {
|
|
|
if (!item.income || !item.purchase) {
|
|
|
proxy.$modal.msgError('请填写完整');
|
|
|
return;
|
|
|
}
|
|
|
const dataItem = item; // 为清晰起见，使用一个新变量
|
|
|
isConsistent= women.some(womanItem => {
|
|
|
// 如果找到一个匹配的women项，返回true
|
|
|
return (
|
|
|
dataItem.income === womanItem.income &&
|
|
|
dataItem.purchase === womanItem.purchase
|
|
|
);
|
|
|
});
|
|
|
});
|
|
|
if(data.length){
|
|
|
if(!isConsistent){
|
|
|
if(id==3){
|
|
|
IncorrectScoring.value=3
|
|
|
}else if(id==4){
|
|
|
IncorrectScoring.value=4
|
|
|
}
|
|
|
proxy.$modal.msgError('划分错误');
|
|
|
}else{
|
|
|
if(id==3){
|
|
|
state.value=4
|
|
|
}else if(id==4){
|
|
|
state.value=5
|
|
|
}
|
|
|
proxy.$modal.msgSuccess('划分成功');
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
// 购买
|
|
|
const Decisiontreepurchase=(sex,buys)=>{
|
|
|
if(state.value<4){
|
|
|
proxy.$modal.msgWarning('请先以上步骤');
|
|
|
return
|
|
|
}
|
|
|
if(sex=='女'){
|
|
|
if(Conditions.value.sex!=='女'){
|
|
|
IncorrectScoring.value=5
|
|
|
proxy.$modal.msgError('购买错误');
|
|
|
}else{
|
|
|
state.value=6
|
|
|
proxy.$modal.msgSuccess('购买成功');
|
|
|
}
|
|
|
}else{
|
|
|
if(Conditions.value.age!=='是'){
|
|
|
if(Conditions.value.age=='否'){
|
|
|
if(buys =='不购买'){
|
|
|
state.value=5
|
|
|
proxy.$modal.msgSuccess('不购买');
|
|
|
}else{
|
|
|
proxy.$modal.msgError('购买错误');
|
|
|
IncorrectScoring.value=5
|
|
|
}
|
|
|
}
|
|
|
}else{
|
|
|
console.log(buys,"buys");
|
|
|
if(buys =='购买'){
|
|
|
proxy.$modal.msgSuccess('购买成功');
|
|
|
}else{
|
|
|
proxy.$modal.msgError('购买错误');
|
|
|
IncorrectScoring.value=5
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
state.value=6
|
|
|
}
|
|
|
// 提交任务
|
|
|
const submit=()=>{
|
|
|
if(state.value){
|
|
|
if(state.value<3){
|
|
|
return proxy.$modal.msgWarning('未分割男性/女性子集!')
|
|
|
}
|
|
|
if( state.value<5){
|
|
|
return proxy.$modal.msgWarning('未划分男性大于30岁/小于等于30岁的子集!')
|
|
|
}
|
|
|
if(state.value<6){
|
|
|
return proxy.$modal.msgWarning('请先绘制决策树!')
|
|
|
}
|
|
|
}
|
|
|
|
|
|
commonality.submitTask({module:'人工智能',numberOfErrors:IncorrectScoring.value > 10 ? 10 : IncorrectScoring.value || 0,taskName:'机器人学习',userId:JSON.parse(getUserInfo()).userId}).then((response) => {
|
|
|
proxy.$modal.msgSuccess("提交任务成功");
|
|
|
restartStatus.value=false
|
|
|
robotlearningVisible.value=false
|
|
|
handleCole()
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
});
|
|
|
}
|
|
|
// 保存
|
|
|
const handleCole=()=>{
|
|
|
const dtoList={}
|
|
|
dtoList.one=JSON.stringify(MaleSubset.value),
|
|
|
dtoList.two=JSON.stringify(FemaleSubset.value),
|
|
|
dtoList.three=JSON.stringify(greaterThan.value),
|
|
|
dtoList.four=JSON.stringify(lessThan.value),
|
|
|
dtoList.userId=JSON.parse(getUserInfo()).userId
|
|
|
dtoList.subState=state.value
|
|
|
dtoList.numberOfErrors=IncorrectScoring.value
|
|
|
robotlearningVisible.value=false
|
|
|
if(restartStatus.value) return
|
|
|
commonality.RobotSave(dtoList).then((response) => {
|
|
|
})
|
|
|
}
|
|
|
const getList=()=>{
|
|
|
commonality.RobotECho({userId:JSON.parse(getUserInfo()).userId}).then(res=>{
|
|
|
if(restartStatus.value) return
|
|
|
MaleSubset.value=JSON.parse(res.data.stepOneA)
|
|
|
FemaleSubset.value=JSON.parse(res.data.stepOneB)
|
|
|
greaterThan.value=JSON.parse(res.data.stepOneC)
|
|
|
lessThan.value=JSON.parse(res.data.stepOneD)
|
|
|
state.value=res.data.subState || 1
|
|
|
})
|
|
|
}
|
|
|
const restart=()=>{
|
|
|
state.value=0
|
|
|
restartStatus.value=true
|
|
|
robotlearningVisible.value=false
|
|
|
MaleSubset.value=[
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
]
|
|
|
FemaleSubset.value=[
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
]
|
|
|
greaterThan.value=[
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
},
|
|
|
]
|
|
|
lessThan.value=[
|
|
|
{
|
|
|
age:'',
|
|
|
sex:'',
|
|
|
income:'',
|
|
|
purchase:''
|
|
|
}
|
|
|
]
|
|
|
Conditions.value.sex=''
|
|
|
Conditions.value.age=''
|
|
|
}
|
|
|
getList()
|
|
|
//组件销毁钩子
|
|
|
onBeforeUnmount(() => {
|
|
|
handleCole()
|
|
|
})
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
.Robot-learning {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.right {
|
|
|
position: absolute;
|
|
|
top: 180px;
|
|
|
right: 41px;
|
|
|
width: 216px;
|
|
|
padding-left: 60px;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
width: 110px;
|
|
|
height: 143px;
|
|
|
background: url("@/assets/images/szjj/案例任务.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
.gdialog{
|
|
|
.TaskBackground{
|
|
|
span{
|
|
|
display: inline-block;
|
|
|
width: 181px;
|
|
|
height: 66px;
|
|
|
text-align: center;
|
|
|
line-height: 66px;
|
|
|
background: url("@/assets/images/szjj/任务背景.png") no-repeat !important;
|
|
|
background-size: 100% 100% !important;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
color: #333333;
|
|
|
}
|
|
|
}
|
|
|
.info{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
color:#FFFFFF !important;
|
|
|
img{
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
.tabback{
|
|
|
width: calc(100% - 30%);
|
|
|
padding: 13px 17px;
|
|
|
background: url('@/assets/images/szjj/圆角矩形 10 拷贝 3.png') no-repeat center center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.tab2{
|
|
|
width: calc(100% - 40%);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.tab3{
|
|
|
width: calc(100% - 50%);
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.DecisionTree{
|
|
|
position: relative;
|
|
|
width: calc(100% - 45%);
|
|
|
height: 316px;
|
|
|
padding: 12px 0px;
|
|
|
background: url('@/assets/images/szjj/圆角矩形 10 拷贝 3.png') no-repeat center center;
|
|
|
background-size: 100% 100%;
|
|
|
.titleimg{
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
.sex{
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
margin-left: 12px;
|
|
|
margin-top: 10px;
|
|
|
height: 31px;
|
|
|
|
|
|
&::before{
|
|
|
content: '';
|
|
|
display: inline-block;
|
|
|
position: absolute;
|
|
|
top: 92%;
|
|
|
left: 30%;
|
|
|
width: 264px;
|
|
|
height: 58px;
|
|
|
background: url('@/assets/images/szjj/线条.png') no-repeat center center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.information{
|
|
|
position: absolute;
|
|
|
top: 57%;
|
|
|
left: 20%;
|
|
|
display: flex;
|
|
|
gap: 116px;
|
|
|
.box{
|
|
|
width: 147px;
|
|
|
height: 31px;
|
|
|
background: linear-gradient(-90deg, #6C32E0 0%, #A365E2 100%);
|
|
|
border-radius: 4px;
|
|
|
border: 2px solid;
|
|
|
border-image: linear-gradient(0deg, #C0DCFF, #CBBAFF) 10 10;
|
|
|
}
|
|
|
.box:nth-child(1){
|
|
|
&::before{
|
|
|
content: '男';
|
|
|
position: absolute;
|
|
|
top: -98%;
|
|
|
left: 14%;
|
|
|
|
|
|
|
|
|
}
|
|
|
&::after{
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 99%;
|
|
|
left: -2%;
|
|
|
width: 169px;
|
|
|
height: 66px;
|
|
|
background: url('@/assets/images/szjj/线条.png') no-repeat center center;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
// .box:nth-child(2){
|
|
|
// &::before{
|
|
|
// content: '';
|
|
|
// position: absolute;
|
|
|
// top: -98%;
|
|
|
// left: 87%;
|
|
|
// width: 85px;
|
|
|
// height: 28px;
|
|
|
// line-height: 28px;
|
|
|
// text-align: center;
|
|
|
// background: #FFFFFF;
|
|
|
// border-radius: 2px;
|
|
|
// border: 1px solid #E5E5E5;
|
|
|
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
}
|
|
|
.ipt{
|
|
|
position: absolute;
|
|
|
top: -146%;
|
|
|
right: -6%;
|
|
|
width: 85px;
|
|
|
height: 28px !important;
|
|
|
// 不继承
|
|
|
}
|
|
|
.Consumption{
|
|
|
position: absolute;
|
|
|
bottom: 3%;
|
|
|
left: 12%;
|
|
|
display: flex;
|
|
|
gap: 90px;
|
|
|
.box1{
|
|
|
width: 90px;
|
|
|
height: 31px;
|
|
|
background: linear-gradient(-90deg, #6C32E0 0%, #A365E2 100%);
|
|
|
border-radius: 4px;
|
|
|
border: 2px solid;
|
|
|
border-image: linear-gradient(0deg, #C0DCFF, #CBBAFF) 10 10;
|
|
|
span{
|
|
|
display: inline-block;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 90px;
|
|
|
line-height: 31px;
|
|
|
color: #FFFFFF;
|
|
|
text-align: center;
|
|
|
img{
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.box1:nth-child(1){
|
|
|
&::before{
|
|
|
content: '大于30岁';
|
|
|
position: absolute;
|
|
|
top: -100%;
|
|
|
left:-20%;
|
|
|
width: 85px;
|
|
|
height: 28px;
|
|
|
line-height: 28px;
|
|
|
text-align: center;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #E5E5E5;
|
|
|
}
|
|
|
}
|
|
|
// .box1:nth-child(2){
|
|
|
// &::before{
|
|
|
// content: '小于等于30岁';
|
|
|
// position: absolute;
|
|
|
// top: -113%;
|
|
|
// left: 85%;
|
|
|
// width: 90px;
|
|
|
// height: 28px;
|
|
|
// line-height: 28px;
|
|
|
// text-align: center;
|
|
|
// background: #FFFFFF;
|
|
|
// border-radius: 2px;
|
|
|
// // border: 1px solid #E5E5E5;
|
|
|
// }
|
|
|
// }
|
|
|
.ipt1{
|
|
|
position: absolute;
|
|
|
top: -136%;
|
|
|
right: 89%;
|
|
|
width: 85px;
|
|
|
height: 28px !important;
|
|
|
// 不继承
|
|
|
}
|
|
|
}
|
|
|
.tetx{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 147px;
|
|
|
text-align: center;
|
|
|
line-height: 29px;
|
|
|
background: linear-gradient(-90deg, #6C32E0 0%, #A365E2 100%);
|
|
|
border-radius: 4px;
|
|
|
border: 2px solid;
|
|
|
border-image: linear-gradient(0deg, #C0DCFF, #CBBAFF) 10 10;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
color: #FFFFFF;
|
|
|
img{
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.LeftbuttonS{
|
|
|
width: 136px;
|
|
|
height: 40px;
|
|
|
background:url('@/assets/images/szjj/按钮1.png') no-repeat center center;
|
|
|
background-size: 100% 100%;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
border: none;
|
|
|
// cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.tj{
|
|
|
--el-button-hover-text-color:#000000;
|
|
|
}
|
|
|
</style> |