|
|
|
|
@ -1,9 +1,678 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="content">
|
|
|
|
|
帕累托/ABC分析
|
|
|
|
|
<div class="import" @click="knowledgeFlag = !knowledgeFlag">
|
|
|
|
|
<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 v-if="!knowledgeFlag">
|
|
|
|
|
<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">下载数据</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">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</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">提交</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="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">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="销售额占比（%）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="data3"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 110px"
|
|
|
|
|
>
|
|
|
|
|
</el-input
|
|
|
|
|
>%
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="累计销售额占比（%）"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="data4"
|
|
|
|
|
>
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 110px"
|
|
|
|
|
>
|
|
|
|
|
</el-input
|
|
|
|
|
>%
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</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">
|
|
|
|
|
<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">
|
|
|
|
|
<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>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</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">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step5Data"
|
|
|
|
|
style="width: 680px"
|
|
|
|
|
border
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="" align="center" prop="title" />
|
|
|
|
|
<el-table-column label="R值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params1"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="F值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="M值打分" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params3"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 100px"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<div class="submit">提交</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>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup></script>
|
|
|
|
|
<script setup>
|
|
|
|
|
const knowledgeFlag = ref(false);
|
|
|
|
|
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: "5900",
|
|
|
|
|
},
|
|
|
|
|
{ name: "儿童服装", amount: "600" },
|
|
|
|
|
{ name: "婴儿用品", amount: "1100" },
|
|
|
|
|
{ name: "床上用品", amount: "2400" },
|
|
|
|
|
]);
|
|
|
|
|
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%，给予一般关注",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
background: rgba(0, 29, 64, 0.5);
|
|
|
|
|
border: 1px solid #0452c6;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
// opacity: 0.5;
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
|
|
|
|
.import {
|
|
|
|
|
display: flex;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 56px;
|
|
|
|
|
background-image: url("@/assets/images/01.png");
|
|
|
|
|
background-size: 180px 56px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
line-height: 56px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
img {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.caseBack {
|
|
|
|
|
.title {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
span {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.download {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
color: #000;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 31px;
|
|
|
|
|
width: 89px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
background: url("@/assets/images/downloadIcon.png");
|
|
|
|
|
}
|
|
|
|
|
.submit {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
color: #000;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 31px;
|
|
|
|
|
width: 99px;
|
|
|
|
|
height: 31px;
|
|
|
|
|
background: url("@/assets/images/提交任务.png");
|
|
|
|
|
}
|
|
|
|
|
.customerType {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 945px;
|
|
|
|
|
height: 26px;
|
|
|
|
|
background: #003b75;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 1px solid #0052a3;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 1400px;
|
|
|
|
|
height: 1px;
|
|
|
|
|
border: 1px solid #0452c6;
|
|
|
|
|
opacity: 0.5;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table tr {
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
HeHaonan
2 years ago
