|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="import" @click="dialogVisible = true">
|
|
|
<img src="@/assets/images/导入.png" alt="" />
|
|
|
<span>任务知识导入</span>
|
|
|
</div>
|
|
|
<!-- <div v-if="knowledgeFlag">
|
|
|
<p>
|
|
|
帕累托分析法源于经典的二八法则。意大利经济学家维尔弗雷多·帕累托于1906年提出了著名的关于意大利社会财务分配的研究结论：20%的人口掌握了80%的社会财富。这个结论对大多数国家的社会财富分配情况都成立。因此帕累托法则又被称为80/20法则。<br /><br />
|
|
|
帕累托分析的核心观点是：在许多情况下，大部分的问题、效益或成本都来自于少数的要素。换句话说，少数关键要素占据了绝大多数的结果。这一规律在许多领域都具有普适性，例如：<br /><br />
|
|
|
在企业中，80%的利润可能来自于20%的产品或客户。<br />
|
|
|
在销售中，80%的销售额可能来自于20%的销售员或产品。<br />
|
|
|
在质量控制中，80%的缺陷可能来自于20%的原因或工序。<br /><br />
|
|
|
ABC 分类法全称应为 ABC 分类库存控制法。
|
|
|
又称帕累托分析法或巴雷托分析法、柏拉图分析、主次因分析法
|
|
|
、ABC分析法、ABC 管理法，平常也称之为「80 对 20」规则。
|
|
|
</p>
|
|
|
<img src="@/assets/images/u3323.png" alt="" /><br />
|
|
|
<img src="@/assets/images/u3324.png" alt="" />
|
|
|
</div> -->
|
|
|
<div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
<span>案例背景：</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">现有以下某商店的交易原始数据，需要采用帕累托分析方法，对商品进行分类：</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="fileTable1"
|
|
|
style="width: 650px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="交易单号" align="center" prop="id"></el-table-column>
|
|
|
<el-table-column label="商品名称" align="center" prop="name"></el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="amount"></el-table-column>
|
|
|
</el-table>
|
|
|
<div class="download" @click="downloadData">下载数据</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第一步，统计各类商品累计销售额</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">以商品为统计单元，计算各类商品的销售额。</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step1Data"
|
|
|
style="width: 450px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品名称" align="center" prop="name"></el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-input v-model="scope.row.params" placeholder="请输入" style="width: 130px"></el-input>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="scope.row.isError" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</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">
|
|
|
<el-table
|
|
|
:data="step2Data"
|
|
|
style="width: 650px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品名称" align="center" prop="name"></el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="amount"></el-table-column>
|
|
|
<el-table-column label="操作" align="center">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<img src="@/assets/images/上.png" alt="" style="margin-right: 10px; cursor: pointer" @click="moveUp(scope.$index, scope.row)" />
|
|
|
<img src="@/assets/images/下.png" alt="" style="cursor: pointer" @click="moveDown(scope.$index, scope.row)" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="submit" @click="step2Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第三步，计算累计销售额占比</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">计算各个商品的销售额占比，并以此通过累加计算累计销售额占比。</span>
|
|
|
<div style="margin-top: 10px; display: flex" v-if="step2AnswerFlag">
|
|
|
<el-table
|
|
|
:data="step3Data"
|
|
|
style="width: 650px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品名称" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="data2" width="100"></el-table-column>
|
|
|
<el-table-column label="销售额占比（%）" align="center" prop="data3">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 110px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="scope.row.isError1" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column label="累计销售额占比（%）" align="center" prop="data4" width="200">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 110px"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="scope.row.isError2" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</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">我们按照0-80%，80%-90%，90%-100%将商品分成ABC3个类别，然后对于这3个类别的产品做区别管理，以提高效益。</span>
|
|
|
<el-table
|
|
|
:show-header="false"
|
|
|
:data="typeData"
|
|
|
style="width: 580px; margin-top: 10px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="用户ID" align="center" prop="data1" width="160"></el-table-column>
|
|
|
<el-table-column label="用户名称" align="center" prop="data2"></el-table-column>
|
|
|
</el-table>
|
|
|
<div style="margin-top: 10px; display: flex" v-if="step3AnswerFlag">
|
|
|
<el-table
|
|
|
:data="step4Data"
|
|
|
style="width: 680px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="商品名称" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="销售额" align="center" prop="data2"></el-table-column>
|
|
|
<el-table-column label="累计销售额占比（%）" align="center" prop="data3"></el-table-column>
|
|
|
<el-table-column label="划分商品类型" align="center" prop="data4">
|
|
|
<template #default="scope">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-select v-model="scope.row.params" placeholder="请选择" style="width: 100px">
|
|
|
<el-option :label="'A类商品'" :value="'A类商品'" />
|
|
|
<el-option :label="'B类商品'" :value="'B类商品'" />
|
|
|
<el-option :label="'C类商品'" :value="'C类商品'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px">
|
|
|
<span v-if="scope.row.isError" style="color: red">X</span>
|
|
|
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<div class="submit" @click="step4Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第五步，绘制帕累托图</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">以分析表的商品名称为X轴，销售额为左侧Y轴，累计销售额占比为右侧Y轴绘制帕累托图。</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div id="echarts" style="width: 500px; height: 400px"></div>
|
|
|
<div class="submit" @click="step5Submit" v-if="step3AnswerFlag">提交</div>
|
|
|
</div>
|
|
|
<div class="chartXData" v-if="step3AnswerFlag">
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-select v-model="chartParam1" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag">
|
|
|
<span v-if="chartParam1 != '男士配饰'" style="color: red">X</span>
|
|
|
<span v-if="chartParam1 == '男士配饰'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-select v-model="chartParam2" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag">
|
|
|
<span v-if="chartParam2 != '床上用品'" style="color: red">X</span>
|
|
|
<span v-if="chartParam2 == '床上用品'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-select v-model="chartParam3" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag">
|
|
|
<span v-if="chartParam3 != '婴儿用品'" style="color: red">X</span>
|
|
|
<span v-if="chartParam3 == '婴儿用品'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="display: flex; align-items: center; justify-content: center">
|
|
|
<el-select v-model="chartParam4" placeholder="请选择" style="width: 85px" class="XdataItem" size="small" @change="selectChange">
|
|
|
<el-option :label="'男士配饰'" :value="'男士配饰'" />
|
|
|
<el-option :label="'床上用品'" :value="'床上用品'" />
|
|
|
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
|
|
|
<el-option :label="'儿童服装'" :value="'儿童服装'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag">
|
|
|
<span v-if="chartParam4 != '儿童服装'" style="color: red">X</span>
|
|
|
<span v-if="chartParam4 == '儿童服装'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第六步，针对不同类别的商品，制定不同的库存策略</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">一般来说，在商品的库存管理策略中：</span>
|
|
|
<div class="customerType" style="width: 1115px">
|
|
|
<img src="@/assets/images/商品a.png" alt="" />
|
|
|
<span>A类商品对公司销售额贡献最大，这种商品备货周期短，在保证安全库存的情况下，应该小批量多批次按需储存，尽可能降低库存总量，减少仓储管理成本，但如果控制不好库存，很容易出现断货风险。</span>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 1115px">
|
|
|
<img src="@/assets/images/商品b.png" alt="" />
|
|
|
<span>B类商品销售额贡献次之，这种商品备货周期可以适当延长。</span>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 1115px">
|
|
|
<img src="@/assets/images/商品c.png" alt="" />
|
|
|
<span>C类商品属于长尾商品，备货周期更长，最好是集中采购，并适当增大库存量，相应减少订货次数。</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
|
|
|
<template v-slot:content>
|
|
|
<p>
|
|
|
帕累托分析法源于经典的二八法则。意大利经济学家维尔弗雷多·帕累托于1906年提出了著名的关于意大利社会财务分配的研究结论：20%的人口掌握了80%的社会财富。这个结论对大多数国家的社会财富分配情况都成立。因此帕累托法则又被称为80/20法则。
|
|
|
<br />
|
|
|
<br />
|
|
|
帕累托分析的核心观点是：在许多情况下，大部分的问题、效益或成本都来自于少数的要素。换句话说，少数关键要素占据了绝大多数的结果。这一规律在许多领域都具有普适性，例如：
|
|
|
<br />
|
|
|
<br />
|
|
|
在企业中，80%的利润可能来自于20%的产品或客户。
|
|
|
<br />
|
|
|
在销售中，80%的销售额可能来自于20%的销售员或产品。
|
|
|
<br />
|
|
|
在质量控制中，80%的缺陷可能来自于20%的原因或工序。
|
|
|
<br />
|
|
|
<br />
|
|
|
ABC 分类法全称应为 ABC 分类库存控制法。 又称帕累托分析法或巴雷托分析法、柏拉图分析、主次因分析法 、ABC分析法、ABC 管理法，平常也称之为「80 对 20」规则。
|
|
|
</p>
|
|
|
<img src="@/assets/images/u3323.png" alt="" />
|
|
|
<br />
|
|
|
<img src="@/assets/images/u3324.png" alt="" />
|
|
|
</template>
|
|
|
</pop-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import * as echarts from "echarts";
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
const showAnswerFlag = ref(false);
|
|
|
const dialogVisible = ref(false);
|
|
|
const knowledgeFlag = ref(false);
|
|
|
const errorNum = ref(0);
|
|
|
const step1Error = ref(0);
|
|
|
const step2Error = ref(0);
|
|
|
const step3Error = ref(0);
|
|
|
const step4Error = ref(0);
|
|
|
const step5Error = ref(0);
|
|
|
const step1AnswerFlag = ref(false);
|
|
|
const step2AnswerFlag = ref(false);
|
|
|
const step3AnswerFlag = ref(false);
|
|
|
const step4AnswerFlag = ref(false);
|
|
|
const step5AnswerFlag = ref(false);
|
|
|
const chartParam1 = ref("");
|
|
|
const chartParam2 = ref("");
|
|
|
const chartParam3 = ref("");
|
|
|
const chartParam4 = ref("");
|
|
|
const step1Data = ref([
|
|
|
{
|
|
|
name: "男士配饰",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "儿童服装",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "婴儿用品",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "床上用品",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
]);
|
|
|
const fileTable1 = ref([
|
|
|
{
|
|
|
id: "20250101",
|
|
|
name: "男士配饰",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
id: "20250102",
|
|
|
name: "儿童服装",
|
|
|
amount: "300",
|
|
|
},
|
|
|
{
|
|
|
id: "20250103",
|
|
|
name: "婴儿用品",
|
|
|
amount: "400",
|
|
|
},
|
|
|
{
|
|
|
id: "20250104",
|
|
|
name: "床上用品",
|
|
|
amount: "1200",
|
|
|
},
|
|
|
{
|
|
|
id: "20250105",
|
|
|
name: "男士配饰",
|
|
|
amount: "1800",
|
|
|
},
|
|
|
{
|
|
|
id: "20250106",
|
|
|
name: "婴儿用品",
|
|
|
amount: "300",
|
|
|
},
|
|
|
{
|
|
|
id: "20250107",
|
|
|
name: "男士配饰",
|
|
|
amount: "1800",
|
|
|
},
|
|
|
{
|
|
|
id: "20250108",
|
|
|
name: "儿童服装",
|
|
|
amount: "300",
|
|
|
},
|
|
|
{
|
|
|
id: "20250109",
|
|
|
name: "床上用品",
|
|
|
amount: "1200",
|
|
|
},
|
|
|
{
|
|
|
id: "20250110",
|
|
|
name: "婴儿用品",
|
|
|
amount: "400",
|
|
|
},
|
|
|
]);
|
|
|
const step2Data = ref([
|
|
|
{
|
|
|
name: "男士配饰",
|
|
|
amount: "",
|
|
|
},
|
|
|
{ name: "儿童服装", amount: "" },
|
|
|
{ name: "婴儿用品", amount: "" },
|
|
|
{ name: "床上用品", amount: "" },
|
|
|
]);
|
|
|
const step3Data = ref([
|
|
|
{
|
|
|
data1: "男士配饰",
|
|
|
data2: "5900",
|
|
|
},
|
|
|
{
|
|
|
data1: "床上用品",
|
|
|
data2: "2400",
|
|
|
},
|
|
|
{
|
|
|
data1: "婴儿用品",
|
|
|
data2: "1100",
|
|
|
},
|
|
|
|
|
|
{
|
|
|
data1: "儿童服装",
|
|
|
data2: "600",
|
|
|
},
|
|
|
]);
|
|
|
const step4Data = ref([
|
|
|
{
|
|
|
data1: "男士配饰",
|
|
|
data2: "5900",
|
|
|
data3: "59%",
|
|
|
data4: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "床上用品",
|
|
|
data2: "2400",
|
|
|
data3: "83%",
|
|
|
data4: "3",
|
|
|
},
|
|
|
{
|
|
|
data1: "婴儿用品",
|
|
|
data2: "1100",
|
|
|
data3: "94%",
|
|
|
data4: "1",
|
|
|
},
|
|
|
{
|
|
|
data1: "儿童服装",
|
|
|
data2: "600",
|
|
|
data3: "100%",
|
|
|
data4: "1",
|
|
|
},
|
|
|
]);
|
|
|
const step5Data = ref([
|
|
|
{
|
|
|
title: "平均值",
|
|
|
},
|
|
|
]);
|
|
|
const step6Data = ref([
|
|
|
{
|
|
|
data1: "1",
|
|
|
data2: "小明",
|
|
|
data3: "4",
|
|
|
data4: "2",
|
|
|
data5: "4",
|
|
|
},
|
|
|
{
|
|
|
data1: "2",
|
|
|
data2: "小红",
|
|
|
data3: "5",
|
|
|
data4: "2",
|
|
|
data5: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "3",
|
|
|
data2: "小李",
|
|
|
data3: "5",
|
|
|
data4: "1",
|
|
|
data5: "1",
|
|
|
},
|
|
|
]);
|
|
|
const rulesTable = ref([
|
|
|
{
|
|
|
data1: "1.重要价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "2.重要发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "3.重要保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "4.重要挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "5.一般价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "6.一般发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "7.一般保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "6.一般挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
]);
|
|
|
const typeData = ref([
|
|
|
{
|
|
|
data1: "A类商品",
|
|
|
data2: "占总销售额的80%，需要重点关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "B类商品",
|
|
|
data2: "占总销售额的10%，给予次要关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "C类商品",
|
|
|
data2: "占总销售额的10%，给予一般关注",
|
|
|
},
|
|
|
]);
|
|
|
onBeforeUnmount(() => {
|
|
|
saveData();
|
|
|
});
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
// initCharts();
|
|
|
});
|
|
|
const initCharts = () => {
|
|
|
var chartDom = document.getElementById("echarts");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
|
|
|
option = {
|
|
|
title: {
|
|
|
text: "帕累托图",
|
|
|
left: "center",
|
|
|
top: "10px",
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
// fontSize:16
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "cross",
|
|
|
crossStyle: {
|
|
|
color: "#999",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["销售额", "累计销售占比"],
|
|
|
bottom: 5,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
|
show: false,
|
|
|
type: "category",
|
|
|
data: ["", "", "", ""],
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "销售额",
|
|
|
// min: 0,
|
|
|
// max: 250,
|
|
|
// interval: 50,
|
|
|
axisLabel: {
|
|
|
formatter: "{value}",
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "累计销售占比",
|
|
|
min: 0,
|
|
|
max: 120,
|
|
|
interval: 20,
|
|
|
axisLabel: {
|
|
|
formatter: "{value} %",
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "销售额",
|
|
|
type: "bar",
|
|
|
tooltip: {
|
|
|
valueFormatter: function (value) {
|
|
|
return value + " 元";
|
|
|
},
|
|
|
},
|
|
|
// data: [5900, 2400, 1100, 600],
|
|
|
data: [step3Data.value[0].data2, step3Data.value[1].data2, step3Data.value[2].data2, step3Data.value[3].data2],
|
|
|
},
|
|
|
|
|
|
{
|
|
|
name: "累计销售占比",
|
|
|
type: "line",
|
|
|
yAxisIndex: 1,
|
|
|
tooltip: {
|
|
|
valueFormatter: function (value) {
|
|
|
return value + " %";
|
|
|
},
|
|
|
},
|
|
|
// data: [59, 83, 94, 100],
|
|
|
data: [step3Data.value[0].params2, step3Data.value[1].params2, step3Data.value[2].params2, step3Data.value[3].params2],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
};
|
|
|
const moveUp = (index, row) => {
|
|
|
console.log("上移", index, row);
|
|
|
if (index > 0) {
|
|
|
const upDate = step2Data.value[index - 1];
|
|
|
step2Data.value.splice(index - 1, 1);
|
|
|
step2Data.value.splice(index, 0, upDate);
|
|
|
} else {
|
|
|
alert("已经是第一条，不可上移");
|
|
|
}
|
|
|
};
|
|
|
const moveDown = (index, row) => {
|
|
|
console.log("下移", index, row);
|
|
|
if (index + 1 === step2Data.value.length) {
|
|
|
alert("已经是最后一条，不可下移");
|
|
|
} else {
|
|
|
const downDate = step2Data.value[index + 1];
|
|
|
step2Data.value.splice(index + 1, 1);
|
|
|
step2Data.value.splice(index, 0, downDate);
|
|
|
}
|
|
|
};
|
|
|
const downloadData = () => {
|
|
|
// console.log(666);
|
|
|
// portraitModel
|
|
|
// .downloadDataByABC({})
|
|
|
// .then((res) => {
|
|
|
// // console.log(res,'--');
|
|
|
// const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
// downBlobFile(`案例数据-帕累托分析`, blob);
|
|
|
// })
|
|
|
// .catch((error) => {});
|
|
|
window.open(baseUrl + "/api/downDataByUserPortrait/analysisByPareto");
|
|
|
};
|
|
|
const step1Submit = () => {
|
|
|
step1Error.value = 0;
|
|
|
for (let i in step1Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step1Data.value[i].params) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step1Data.value[0].params && step1Data.value[0].params !== "5900") {
|
|
|
step1Error.value++;
|
|
|
step1Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[1].params && step1Data.value[1].params !== "600") {
|
|
|
step1Error.value++;
|
|
|
step1Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[2].params && step1Data.value[2].params !== "1100") {
|
|
|
step1Error.value++;
|
|
|
step1Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[3].params && step1Data.value[3].params !== "2400") {
|
|
|
step1Error.value++;
|
|
|
step1Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[3].isError = false;
|
|
|
}
|
|
|
console.log(step1Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step1AnswerFlag.value = true;
|
|
|
//将所填值同步到第二步表格
|
|
|
step2Data.value[0].amount = step1Data.value[0].params;
|
|
|
step2Data.value[1].amount = step1Data.value[1].params;
|
|
|
step2Data.value[2].amount = step1Data.value[2].params;
|
|
|
step2Data.value[3].amount = step1Data.value[3].params;
|
|
|
};
|
|
|
const step2Submit = () => {
|
|
|
step2Error.value = 0;
|
|
|
if (Number(step2Data.value[0].amount) > Number(step2Data.value[1].amount) && Number(step2Data.value[1].amount) > Number(step2Data.value[2].amount) && Number(step2Data.value[2].amount) > Number(step2Data.value[3].amount)) {
|
|
|
step2Error.value = 0;
|
|
|
} else {
|
|
|
step2Error.value = 1;
|
|
|
}
|
|
|
console.log("错误数", step2Error.value);
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step3Data.value[0].data2 = step2Data.value[0].amount;
|
|
|
step3Data.value[1].data2 = step2Data.value[1].amount;
|
|
|
step3Data.value[2].data2 = step2Data.value[2].amount;
|
|
|
step3Data.value[3].data2 = step2Data.value[3].amount;
|
|
|
step2AnswerFlag.value = true;
|
|
|
};
|
|
|
const step3Submit = () => {
|
|
|
step3Error.value = 0;
|
|
|
for (let i in step3Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step3Data.value[i].params1 || !step3Data.value[i].params2) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "59") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[0].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "59") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[0].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "24") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[1].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "83") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[1].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "11") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[2].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "94") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[2].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "6") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[3].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "100") {
|
|
|
step3Error.value++;
|
|
|
step3Data.value[3].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError2 = false;
|
|
|
}
|
|
|
console.log("错误数", step3Error.value);
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step4Data.value[0].data2 = step3Data.value[0].data2;
|
|
|
step4Data.value[1].data2 = step3Data.value[1].data2;
|
|
|
step4Data.value[2].data2 = step3Data.value[2].data2;
|
|
|
step4Data.value[3].data2 = step3Data.value[3].data2;
|
|
|
step4Data.value[0].data3 = step3Data.value[0].params2;
|
|
|
step4Data.value[1].data3 = step3Data.value[1].params2;
|
|
|
step4Data.value[2].data3 = step3Data.value[2].params2;
|
|
|
step4Data.value[3].data3 = step3Data.value[3].params2;
|
|
|
step3AnswerFlag.value = true;
|
|
|
initCharts();
|
|
|
};
|
|
|
const step4Submit = () => {
|
|
|
step4Error.value = 0;
|
|
|
// console.log('asd1112');
|
|
|
for (let i in step4Data.value) {
|
|
|
// console.log(fileTable1.value[i]);
|
|
|
if (!step4Data.value[i].params || !step4Data.value[i].params) {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
if (step4Data.value[0].params && step4Data.value[0].params !== "A类商品") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[1].params && step4Data.value[1].params !== "B类商品") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[2].params && step4Data.value[2].params !== "C类商品") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[3].params && step4Data.value[3].params !== "C类商品") {
|
|
|
step4Error.value++;
|
|
|
step4Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[3].isError = false;
|
|
|
}
|
|
|
console.log("错误数", step4Error.value);
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step4AnswerFlag.value = true;
|
|
|
};
|
|
|
const step5Submit = () => {
|
|
|
step5Error.value = 0;
|
|
|
if (chartParam1.value == "" || chartParam2.value == "" || chartParam3.value == "" || chartParam4.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (chartParam1.value != "男士配饰") {
|
|
|
step5Error.value++;
|
|
|
}
|
|
|
if (chartParam2.value != "床上用品") {
|
|
|
step5Error.value++;
|
|
|
}
|
|
|
if (chartParam3.value != "婴儿用品") {
|
|
|
step5Error.value++;
|
|
|
}
|
|
|
if (chartParam4.value != "儿童服装") {
|
|
|
step5Error.value++;
|
|
|
}
|
|
|
console.log("错误数", step5Error.value);
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step5AnswerFlag.value = true;
|
|
|
};
|
|
|
const saveData = () => {
|
|
|
const params = {
|
|
|
stepFiveA: step1Data.value[0].params,
|
|
|
stepFiveB: step1Data.value[1].params,
|
|
|
stepFiveC: step1Data.value[2].params,
|
|
|
stepFiveD: step1Data.value[3].params,
|
|
|
stepSixA: step3Data.value[0].params1,
|
|
|
stepSixB: step3Data.value[0].params2,
|
|
|
stepSixC: step3Data.value[1].params1,
|
|
|
stepSixD: step3Data.value[1].params2,
|
|
|
stepSevenA: step3Data.value[2].params1,
|
|
|
stepSevenB: step3Data.value[2].params2,
|
|
|
stepSevenC: step3Data.value[3].params1,
|
|
|
stepSevenD: step3Data.value[3].params2,
|
|
|
stepEightA: step4Data.value[0].params,
|
|
|
stepEightB: step4Data.value[1].params,
|
|
|
stepEightC: step4Data.value[2].params,
|
|
|
stepEightD: step4Data.value[3].params,
|
|
|
stepNineA: chartParam1.value,
|
|
|
stepNineB: chartParam2.value,
|
|
|
stepNineC: chartParam3.value,
|
|
|
stepNineD: chartParam4.value,
|
|
|
// stepTenA: step4Data.value[1].params2,
|
|
|
// stepTenB: step4Data.value[1].params3,
|
|
|
// stepTenC: step4Data.value[2].params1,
|
|
|
// stepTenD: step4Data.value[2].params2,
|
|
|
// stepElevenA: step4Data.value[2].params3,
|
|
|
// stepOneA: step5Data.value[0].params1,
|
|
|
// stepOneB: step5Data.value[0].params2,
|
|
|
// stepOneC: step5Data.value[0].params3,
|
|
|
// stepOneD: step6Data.value[0].params1,
|
|
|
// stepTwoA: step6Data.value[0].params2,
|
|
|
// stepTwoB: step6Data.value[0].params3,
|
|
|
// stepTwoC: step6Data.value[1].params1,
|
|
|
// stepThreeA: step6Data.value[1].params2,
|
|
|
// stepThreeB: step6Data.value[1].params3,
|
|
|
// stepThreeC: step6Data.value[2].params1,
|
|
|
// stepThreeD: step6Data.value[2].params2,
|
|
|
// stepFourA: step6Data.value[2].params3,
|
|
|
// stepFourB: step7Data.value[0].params,
|
|
|
// stepFourC: step7Data.value[1].params,
|
|
|
// stepFourD: step7Data.value[2].params,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "帕累托/ABC分析",
|
|
|
...params,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const saveDataSubmit = () => {
|
|
|
const params = {
|
|
|
stepFiveA: step1Data.value[0].params,
|
|
|
stepFiveB: step1Data.value[1].params,
|
|
|
stepFiveC: step1Data.value[2].params,
|
|
|
stepFiveD: step1Data.value[3].params,
|
|
|
stepSixA: step3Data.value[0].params1,
|
|
|
stepSixB: step3Data.value[0].params2,
|
|
|
stepSixC: step3Data.value[1].params1,
|
|
|
stepSixD: step3Data.value[1].params2,
|
|
|
stepSevenA: step3Data.value[2].params1,
|
|
|
stepSevenB: step3Data.value[2].params2,
|
|
|
stepSevenC: step3Data.value[3].params1,
|
|
|
stepSevenD: step3Data.value[3].params2,
|
|
|
stepEightA: step4Data.value[0].params,
|
|
|
stepEightB: step4Data.value[1].params,
|
|
|
stepEightC: step4Data.value[2].params,
|
|
|
stepEightD: step4Data.value[3].params,
|
|
|
stepNineA: chartParam1.value,
|
|
|
stepNineB: chartParam2.value,
|
|
|
stepNineC: chartParam3.value,
|
|
|
stepNineD: chartParam4.value,
|
|
|
// stepTenA: step4Data.value[1].params2,
|
|
|
// stepTenB: step4Data.value[1].params3,
|
|
|
// stepTenC: step4Data.value[2].params1,
|
|
|
// stepTenD: step4Data.value[2].params2,
|
|
|
// stepElevenA: step4Data.value[2].params3,
|
|
|
// stepOneA: step5Data.value[0].params1,
|
|
|
// stepOneB: step5Data.value[0].params2,
|
|
|
// stepOneC: step5Data.value[0].params3,
|
|
|
// stepOneD: step6Data.value[0].params1,
|
|
|
// stepTwoA: step6Data.value[0].params2,
|
|
|
// stepTwoB: step6Data.value[0].params3,
|
|
|
// stepTwoC: step6Data.value[1].params1,
|
|
|
// stepThreeA: step6Data.value[1].params2,
|
|
|
// stepThreeB: step6Data.value[1].params3,
|
|
|
// stepThreeC: step6Data.value[2].params1,
|
|
|
// stepThreeD: step6Data.value[2].params2,
|
|
|
// stepFourA: step6Data.value[2].params3,
|
|
|
// stepFourB: step7Data.value[0].params,
|
|
|
// stepFourC: step7Data.value[1].params,
|
|
|
// stepFourD: step7Data.value[2].params,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "帕累托/ABC分析",
|
|
|
...params,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const getData = () => {
|
|
|
portraitModel
|
|
|
.getData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "帕累托/ABC分析",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
step1Data.value[0].params = res.data.stepFiveA;
|
|
|
step1Data.value[1].params = res.data.stepFiveB;
|
|
|
step1Data.value[2].params = res.data.stepFiveC;
|
|
|
step1Data.value[3].params = res.data.stepFiveD;
|
|
|
step3Data.value[0].params1 = res.data.stepSixA;
|
|
|
step3Data.value[0].params2 = res.data.stepSixB;
|
|
|
step3Data.value[1].params1 = res.data.stepSixC;
|
|
|
step3Data.value[1].params2 = res.data.stepSixD;
|
|
|
step3Data.value[2].params1 = res.data.stepSevenA;
|
|
|
step3Data.value[2].params2 = res.data.stepSevenB;
|
|
|
step3Data.value[3].params1 = res.data.stepSevenC;
|
|
|
step3Data.value[3].params2 = res.data.stepSevenD;
|
|
|
step4Data.value[0].params = res.data.stepEightA;
|
|
|
step4Data.value[1].params = res.data.stepEightB;
|
|
|
step4Data.value[2].params = res.data.stepEightC;
|
|
|
step4Data.value[3].params = res.data.stepEightD;
|
|
|
chartParam1.value = res.data.stepNineA;
|
|
|
chartParam2.value = res.data.stepNineB;
|
|
|
chartParam3.value = res.data.stepNineC;
|
|
|
chartParam4.value = res.data.stepNineD;
|
|
|
//将所填值同步到第二步表格
|
|
|
step2Data.value[0].amount = step1Data.value[0].params;
|
|
|
step2Data.value[1].amount = step1Data.value[1].params;
|
|
|
step2Data.value[2].amount = step1Data.value[2].params;
|
|
|
step2Data.value[3].amount = step1Data.value[3].params;
|
|
|
if (res.data.subState & (res.data.subState == 1)) {
|
|
|
step4Data.value[0].data2 = step3Data.value[0].data2;
|
|
|
step4Data.value[1].data2 = step3Data.value[1].data2;
|
|
|
step4Data.value[2].data2 = step3Data.value[2].data2;
|
|
|
step4Data.value[3].data2 = step3Data.value[3].data2;
|
|
|
step4Data.value[0].data3 = step3Data.value[0].params2;
|
|
|
step4Data.value[1].data3 = step3Data.value[1].params2;
|
|
|
step4Data.value[2].data3 = step3Data.value[2].params2;
|
|
|
step4Data.value[3].data3 = step3Data.value[3].params2;
|
|
|
step2AnswerFlag.value =true
|
|
|
step3AnswerFlag.value = true;
|
|
|
initCharts();
|
|
|
}
|
|
|
// step4Data.value[1].params2 = res.data.stepTenA;
|
|
|
// step4Data.value[1].params3 = res.data.stepTenB;
|
|
|
// step4Data.value[2].params1 = res.data.stepTenC;
|
|
|
// step4Data.value[2].params2 = res.data.stepTenD;
|
|
|
// step4Data.value[2].params3 = res.data.stepElevenA;
|
|
|
// step5Data.value[0].params1 = res.data.stepOneA;
|
|
|
// step5Data.value[0].params2 = res.data.stepOneB;
|
|
|
// step5Data.value[0].params3 = res.data.stepOneC;
|
|
|
// step6Data.value[0].params1 = res.data.stepOneD;
|
|
|
// step6Data.value[0].params2 = res.data.stepTwoA;
|
|
|
// step6Data.value[0].params3 = res.data.stepTwoB;
|
|
|
// step6Data.value[1].params1 = res.data.stepTwoC;
|
|
|
// step6Data.value[1].params2 = res.data.stepThreeA;
|
|
|
// step6Data.value[1].params3 = res.data.stepThreeB;
|
|
|
// step6Data.value[2].params1 = res.data.stepThreeC;
|
|
|
// step6Data.value[2].params2 = res.data.stepThreeD;
|
|
|
// step6Data.value[2].params3 = res.data.stepFourA;
|
|
|
// step7Data.value[0].params = res.data.stepFourB;
|
|
|
// step7Data.value[1].params = res.data.stepFourC;
|
|
|
// step7Data.value[2].params = res.data.stepFourD;
|
|
|
//回显答案
|
|
|
if (res.data.subState & (res.data.subState == 1)) {
|
|
|
showAnswerFlag.value = true;
|
|
|
if (step1Data.value[0].params && step1Data.value[0].params !== "5900") {
|
|
|
step1Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[1].params && step1Data.value[1].params !== "600") {
|
|
|
step1Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[2].params && step1Data.value[2].params !== "1100") {
|
|
|
step1Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step1Data.value[3].params && step1Data.value[3].params !== "2400") {
|
|
|
step1Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step1Data.value[3].isError = false;
|
|
|
}
|
|
|
|
|
|
if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "59") {
|
|
|
step3Data.value[0].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "59") {
|
|
|
step3Data.value[0].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[0].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "24") {
|
|
|
step3Data.value[1].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "83") {
|
|
|
step3Data.value[1].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[1].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "11") {
|
|
|
step3Data.value[2].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "94") {
|
|
|
step3Data.value[2].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[2].isError2 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "6") {
|
|
|
step3Data.value[3].isError1 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError1 = false;
|
|
|
}
|
|
|
if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "100") {
|
|
|
step3Data.value[3].isError2 = true;
|
|
|
} else {
|
|
|
step3Data.value[3].isError2 = false;
|
|
|
}
|
|
|
|
|
|
if (step4Data.value[0].params && step4Data.value[0].params !== "A类商品") {
|
|
|
step4Data.value[0].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[0].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[1].params && step4Data.value[1].params !== "B类商品") {
|
|
|
step4Data.value[1].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[1].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[2].params && step4Data.value[2].params !== "C类商品") {
|
|
|
step4Data.value[2].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[2].isError = false;
|
|
|
}
|
|
|
if (step4Data.value[3].params && step4Data.value[3].params !== "C类商品") {
|
|
|
step4Data.value[3].isError = true;
|
|
|
} else {
|
|
|
step4Data.value[3].isError = false;
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const selectChange = (item) => {
|
|
|
// console.log(22);
|
|
|
// initCharts();
|
|
|
};
|
|
|
const submitData = () => {
|
|
|
console.log("tj");
|
|
|
if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
|
|
|
proxy.$modal.msgError("请先完成所有步骤！");
|
|
|
return;
|
|
|
}
|
|
|
errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value + step5Error.value;
|
|
|
console.log(errorNum.value, "总错误次数");
|
|
|
portraitModel
|
|
|
.submit({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
taskName: "帕累托/ABC分析",
|
|
|
numberOfErrors: errorNum.value,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
showAnswerFlag.value = true;
|
|
|
saveDataSubmit();
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const retrain = () => {
|
|
|
portraitModel
|
|
|
.retrain({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "帕累托/ABC分析",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
proxy.$modal.msgSuccess("重新实训成功");
|
|
|
for (let i in step1Data.value) {
|
|
|
step1Data.value[i].params = "";
|
|
|
}
|
|
|
for (let i in step3Data.value) {
|
|
|
step3Data.value[i].params1 = "";
|
|
|
step3Data.value[i].params2 = "";
|
|
|
}
|
|
|
for (let i in step4Data.value) {
|
|
|
step4Data.value[i].params = "";
|
|
|
}
|
|
|
// for (let i in step5Data.value) {
|
|
|
// step5Data.value[i].params1 = "";
|
|
|
// step5Data.value[i].params2 = "";
|
|
|
// step5Data.value[i].params3 = "";
|
|
|
// }
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
defineExpose({
|
|
|
submitData,
|
|
|
retrain,
|
|
|
// practicalTraining,
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
// background: rgba(0, 29, 64, 0.5);
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
.chartXData {
|
|
|
display: flex;
|
|
|
position: relative;
|
|
|
top: -58px;
|
|
|
left: 50px;
|
|
|
.XdataItem {
|
|
|
margin-left: 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>
|