|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="import" @click="knowledgeFlag = !knowledgeFlag">
|
|
|
<img src="@/assets/images/导入.png" alt="" />
|
|
|
<span>任务知识导入</span>
|
|
|
</div>
|
|
|
<div v-if="knowledgeFlag">
|
|
|
<p style="line-height: 25px; font-size: 14px">
|
|
|
波士顿矩阵（BCG
|
|
|
Matrix），又称市场增长率-相对市场份额矩阵，由美国著名的管理学家、波士顿咨询公司创始人布鲁斯·亨德森于1970年首创，它是通过销售增长率（反应市场引力的指标）和市场占有率（反应企业实力的指标）来分析决定企业的产品结构。<br />
|
|
|
市场吸引力包括企业销售量增长率、目标市场容量、竞争对手强弱、利润高低等。其中最重要的是反映市场引力的综合指标——销售增长率，这是决定企业产品结构是否合理的外在因素。<br />
|
|
|
企业实力包括市场占有率、技术、设备、资金利用能力等，其中市场占有率是决定企业产品结构的内在因素，他直接显示出企业的竞争实力。
|
|
|
</p>
|
|
|
|
|
|
<img src="@/assets/images/u3678.png" alt="" /><br />
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
波士顿矩阵将产品类型分为四种：<br />
|
|
|
1，明星类产品：高增长且高市占，发展前景好，竞争力强，需加大投资以支持其发展；<br />
|
|
|
2，问题类产品：高增长但低市占，发展前景好但市场开拓不足，需谨慎投资；<br />
|
|
|
3，现金牛产品：低增长但高市占，成熟市场的领导者，应降低投资，维持市占并延缓衰退；<br />
|
|
|
4，瘦狗类产品：低增长且低市占，理论率低甚至亏损，应采取撤退战略。 </span
|
|
|
><br />
|
|
|
<img src="@/assets/images/u3682.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="客户ID" align="center" prop="id">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="消费金额" align="center" prop="amount">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="消费时间" align="center" prop="time">
|
|
|
</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">
|
|
|
以客户ID为统计单元，分别计算各个客户累计的消费次数、消费金额。
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<el-table
|
|
|
:data="step1Data"
|
|
|
style="width: 550px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="客户ID" align="center" prop="name">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="消费次数" align="center" prop="amount">
|
|
|
<template #default="scope">
|
|
|
<el-input
|
|
|
v-model="scope.row.params1"
|
|
|
placeholder="请输入"
|
|
|
style="width: 130px"
|
|
|
>
|
|
|
</el-input>
|
|
|
</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: 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">
|
|
|
以客户ID为统计单元，分别计算各个客户的平均消费次数、平均消费金额。
|
|
|
</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="客户ID" align="center" prop="name">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="消费次数" align="center" prop="amount">
|
|
|
</el-table-column>
|
|
|
<el-table-column label="消费金额" align="center" prop="account">
|
|
|
</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">
|
|
|
<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="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">
|
|
|
按照客户标准，划分A、B、C、D各属于哪类客户。<br />
|
|
|
1、消费次数超过平均值，每次消费力度也超过平均水平的客户：判定为明星客户<br />
|
|
|
2、消费次数超过平均值，但每次消费力度未达到平均水平的客户：被判定为现金流客户<br />
|
|
|
3、消费未达到平均值，但每次消费力度超过平均水平的客户：是问题客户<br />
|
|
|
4、消费未达到平均值，消费力度也未达到平均水平的客户：属于瘦狗客户
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<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: 887px">
|
|
|
<img src="@/assets/images/客户1.png" alt="" />
|
|
|
<span>明星客户，这类客户需要重点关注，并给予最高的礼遇；</span>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/客户2.png" alt="" />
|
|
|
<span
|
|
|
>现金流客户，这类客户通常消费频次比较频繁，能给企业带来较为稳定的现金流，这类客户是企业利润基石；</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/客户3.png" alt="" />
|
|
|
<span
|
|
|
>问题客户，这类客户最有希望转化为明星客户，但是因为客户存在一定的潜在问题，导致消费频次不高，这类客户需要利用客服进行重点跟进和长期跟踪；</span
|
|
|
>
|
|
|
</div>
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
<img src="@/assets/images/客户1.png" alt="" />
|
|
|
<span
|
|
|
>瘦狗客户，这类客户通常占企业客户的大多数，只需要一般性维护，不需要投入重点维系。</span
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
const knowledgeFlag = ref(false);
|
|
|
const step1Data = ref([
|
|
|
{
|
|
|
name: "A",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "B",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "C",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
{
|
|
|
name: "D",
|
|
|
amount: "2300",
|
|
|
},
|
|
|
]);
|
|
|
const fileTable1 = ref([
|
|
|
{
|
|
|
id: "A",
|
|
|
amount: "200",
|
|
|
time: "2023.02.01",
|
|
|
},
|
|
|
{
|
|
|
id: "B",
|
|
|
amount: "300",
|
|
|
time: "2023.02.02",
|
|
|
},
|
|
|
{
|
|
|
id: "A",
|
|
|
time: "2023.02.03",
|
|
|
amount: "200",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.04",
|
|
|
amount: "150",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.05",
|
|
|
amount: "100",
|
|
|
},
|
|
|
{
|
|
|
id: "B",
|
|
|
time: "2023.02.06",
|
|
|
amount: "400",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.07",
|
|
|
amount: "50",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.08",
|
|
|
amount: "250",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.09",
|
|
|
amount: "200",
|
|
|
},
|
|
|
{
|
|
|
id: "B",
|
|
|
time: "2023.02.10",
|
|
|
amount: "300",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.11",
|
|
|
amount: "200",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.12",
|
|
|
amount: "50",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.13",
|
|
|
amount: "100",
|
|
|
},
|
|
|
{
|
|
|
id: "A",
|
|
|
time: "2023.02.14",
|
|
|
amount: "400",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.15",
|
|
|
amount: "200",
|
|
|
},
|
|
|
{
|
|
|
id: "B",
|
|
|
time: "2023.02.16",
|
|
|
amount: "200",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.17",
|
|
|
amount: "150",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.18",
|
|
|
amount: "300",
|
|
|
},
|
|
|
{
|
|
|
id: "C",
|
|
|
time: "2023.02.19",
|
|
|
amount: "50",
|
|
|
},
|
|
|
{
|
|
|
id: "D",
|
|
|
time: "2023.02.20",
|
|
|
amount: "200",
|
|
|
},
|
|
|
]);
|
|
|
const step2Data = ref([
|
|
|
{
|
|
|
name: "A",
|
|
|
amount: "3",
|
|
|
account: "800",
|
|
|
},
|
|
|
{ name: "B", amount: "4", account: "1200" },
|
|
|
{ name: "C", amount: "6", account: "600" },
|
|
|
{ name: "D", amount: "7", account: "1400" },
|
|
|
]);
|
|
|
const step3Data = ref([
|
|
|
{
|
|
|
data1: "男士配饰",
|
|
|
data2: "5900",
|
|
|
},
|
|
|
{
|
|
|
data1: "床上用品",
|
|
|
data2: "2400",
|
|
|
},
|
|
|
{
|
|
|
data1: "婴儿用品",
|
|
|
data2: "1100",
|
|
|
},
|
|
|
|
|
|
{
|
|
|
data1: "儿童服装",
|
|
|
data2: "600",
|
|
|
},
|
|
|
]);
|
|
|
const step4Data = ref([
|
|
|
{
|
|
|
data1: "男士配饰",
|
|
|
data2: "5900",
|
|
|
data3: "59%",
|
|
|
data4: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "床上用品",
|
|
|
data2: "2400",
|
|
|
data3: "83%",
|
|
|
data4: "3",
|
|
|
},
|
|
|
{
|
|
|
data1: "婴儿用品",
|
|
|
data2: "1100",
|
|
|
data3: "94%",
|
|
|
data4: "1",
|
|
|
},
|
|
|
{
|
|
|
data1: "儿童服装",
|
|
|
data2: "600",
|
|
|
data3: "100%",
|
|
|
data4: "1",
|
|
|
},
|
|
|
]);
|
|
|
const step5Data = ref([
|
|
|
{
|
|
|
title: "平均值",
|
|
|
},
|
|
|
]);
|
|
|
const step6Data = ref([
|
|
|
{
|
|
|
data1: "1",
|
|
|
data2: "小明",
|
|
|
data3: "4",
|
|
|
data4: "2",
|
|
|
data5: "4",
|
|
|
},
|
|
|
{
|
|
|
data1: "2",
|
|
|
data2: "小红",
|
|
|
data3: "5",
|
|
|
data4: "2",
|
|
|
data5: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "3",
|
|
|
data2: "小李",
|
|
|
data3: "5",
|
|
|
data4: "1",
|
|
|
data5: "1",
|
|
|
},
|
|
|
]);
|
|
|
const rulesTable = ref([
|
|
|
{
|
|
|
data1: "1.重要价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "2.重要发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "3.重要保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "4.重要挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "5.一般价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "6.一般发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "7.一般保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "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);
|
|
|
}
|
|
|
};
|
|
|
const downloadData = () => {
|
|
|
// console.log(666);
|
|
|
portraitModel
|
|
|
.downloadDataByBoston({
|
|
|
})
|
|
|
.then((res) => {
|
|
|
// console.log(res,'--');
|
|
|
const blob = new Blob([res], { type: "application/vnd.ms-excel" });
|
|
|
downBlobFile(`案例数据-波士顿矩阵分析`, blob);
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
background: rgba(0, 29, 64, 0.5);
|
|
|
border: 1px solid #0452c6;
|
|
|
padding: 10px;
|
|
|
// opacity: 0.5;
|
|
|
|
|
|
.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>
|