|
|
|
|
@ -28,9 +28,7 @@
|
|
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
|
|
<span>案例背景：</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
现有以下某商店的客户消费原始数据，需要采用波士顿矩阵分析方法，对客户进行分类：
|
|
|
|
|
</span>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">现有以下某商店的客户消费原始数据，需要采用波士顿矩阵分析方法，对客户进行分类：</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="fileTable1"
|
|
|
|
|
@ -42,12 +40,9 @@
|
|
|
|
|
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-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>
|
|
|
|
|
@ -58,9 +53,7 @@
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第一步，统计各个客户的消费次数和消费金额</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
以客户ID为统计单元，分别计算各个客户累计的消费次数、消费金额。
|
|
|
|
|
</span>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">以客户ID为统计单元，分别计算各个客户累计的消费次数、消费金额。</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step1Data"
|
|
|
|
|
@ -72,26 +65,15 @@
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="客户ID" align="center" prop="name">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 130px"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -104,9 +86,7 @@
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第二步，确定象限测度划分标准</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
以客户ID为统计单元，分别计算各个客户的平均消费次数、平均消费金额。
|
|
|
|
|
</span>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">以客户ID为统计单元，分别计算各个客户的平均消费次数、平均消费金额。</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex" v-if="step1AnswerFlag">
|
|
|
|
|
<el-table
|
|
|
|
|
:data="step2Data"
|
|
|
|
|
@ -118,28 +98,15 @@
|
|
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="客户ID" align="center" prop="name">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<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"
|
|
|
|
|
v-if="scope.$index == 4"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 130px" v-if="scope.$index == 4"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="消费金额" align="center" prop="account">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="scope.row.params2"
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
style="width: 130px"
|
|
|
|
|
v-if="scope.$index == 4"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 130px" v-if="scope.$index == 4"></el-input>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
@ -152,36 +119,26 @@
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第三步，绘制散点图</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
以消费金额为纵轴，消费次数为横轴，将第一步的客户数据绘制于坐标轴中
|
|
|
|
|
</span>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">以消费金额为纵轴，消费次数为横轴，将第一步的客户数据绘制于坐标轴中</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<div id="charts1" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="submit" @click="step3Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('A', '#009FF1')">
|
|
|
|
|
绘制A
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawPoint('A', '#009FF1')">绘制A</div>
|
|
|
|
|
<span>（3,800）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('B', '#FB54A1')">
|
|
|
|
|
绘制B
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawPoint('B', '#FB54A1')">绘制B</div>
|
|
|
|
|
<span>（4,1200）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('C', '#FE8D2A')">
|
|
|
|
|
绘制C
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawPoint('C', '#FE8D2A')">绘制C</div>
|
|
|
|
|
<span>（6,600）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPoint('D', '#6E70F0')">
|
|
|
|
|
绘制D
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawPoint('D', '#6E70F0')">绘制D</div>
|
|
|
|
|
<span>（7,1400）</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -194,18 +151,14 @@
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第四步，坐标轴区域绘制象限测度划分标准</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
将计算出的客户的平均消费次数、平均消费金额，绘制在坐标轴中。
|
|
|
|
|
</span>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">将计算出的客户的平均消费次数、平均消费金额，绘制在坐标轴中。</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
<div id="charts2" style="width: 500px; height: 400px"></div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="submit" @click="step4Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div class="pointItem" @click="drawPointStep4('A', '#009FF1')">
|
|
|
|
|
绘制平均消费次数X,平均消费金额Y
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawPointStep4('A', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div>
|
|
|
|
|
<span>（5,1000）</span>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div class="point">
|
|
|
|
|
@ -225,10 +178,14 @@
|
|
|
|
|
<span>第五步，划分客户类型</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
按照客户标准，划分A、B、C、D各属于哪类客户。<br />
|
|
|
|
|
1、消费次数超过平均值，每次消费力度也超过平均水平的客户：判定为明星客户<br />
|
|
|
|
|
2、消费次数超过平均值，但每次消费力度未达到平均水平的客户：被判定为现金流客户<br />
|
|
|
|
|
3、消费未达到平均值，但每次消费力度超过平均水平的客户：是问题客户<br />
|
|
|
|
|
按照客户标准，划分A、B、C、D各属于哪类客户。
|
|
|
|
|
<br />
|
|
|
|
|
1、消费次数超过平均值，每次消费力度也超过平均水平的客户：判定为明星客户
|
|
|
|
|
<br />
|
|
|
|
|
2、消费次数超过平均值，但每次消费力度未达到平均水平的客户：被判定为现金流客户
|
|
|
|
|
<br />
|
|
|
|
|
3、消费未达到平均值，但每次消费力度超过平均水平的客户：是问题客户
|
|
|
|
|
<br />
|
|
|
|
|
4、消费未达到平均值，消费力度也未达到平均水平的客户：属于瘦狗客户
|
|
|
|
|
</span>
|
|
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
|
|
@ -237,36 +194,16 @@
|
|
|
|
|
<div class="submit" @click="step5Submit">提交</div>
|
|
|
|
|
<div class="drawPoint">
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('明星客户', 'rgba(52, 134, 207, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
明星客户
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawQuadrant('明星客户', 'rgba(52, 134, 207, 0.8)')">明星客户</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('现金流客户', 'rgba(0, 184, 105, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
现金流客户
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawQuadrant('现金流客户', 'rgba(0, 184, 105, 0.8)')">现金流客户</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('问题客户', 'rgba(177, 130, 192, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
问题客户
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawQuadrant('问题客户', 'rgba(177, 130, 192, 0.8)')">问题客户</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="point">
|
|
|
|
|
<div
|
|
|
|
|
class="pointItem"
|
|
|
|
|
@click="drawQuadrant('瘦狗客户', 'rgba(254, 141, 42, 0.8)')"
|
|
|
|
|
>
|
|
|
|
|
瘦狗客户
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pointItem" @click="drawQuadrant('瘦狗客户', 'rgba(254, 141, 42, 0.8)')">瘦狗客户</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -278,57 +215,63 @@
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>第六步，针对不同的客户类型，制定不同的营销策略</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
当波士顿矩阵应用于客户画像时候，可以大致分析出不同用户的客户画像：
|
|
|
|
|
</span>
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<span>现金流客户，这类客户通常消费频次比较频繁，能给企业带来较为稳定的现金流，这类客户是企业利润基石；</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
|
|
<img src="@/assets/images/客户3.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
>问题客户，这类客户最有希望转化为明星客户，但是因为客户存在一定的潜在问题，导致消费频次不高，这类客户需要利用客服进行重点跟进和长期跟踪；</span
|
|
|
|
|
>
|
|
|
|
|
<span>问题客户，这类客户最有希望转化为明星客户，但是因为客户存在一定的潜在问题，导致消费频次不高，这类客户需要利用客服进行重点跟进和长期跟踪；</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="customerType" style="width: 887px">
|
|
|
|
|
<img src="@/assets/images/客户1.png" alt="" />
|
|
|
|
|
<span
|
|
|
|
|
>瘦狗客户，这类客户通常占企业客户的大多数，只需要一般性维护，不需要投入重点维系。</span
|
|
|
|
|
>
|
|
|
|
|
<span>瘦狗客户，这类客户通常占企业客户的大多数，只需要一般性维护，不需要投入重点维系。</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
|
|
|
|
|
<template v-slot:content>
|
|
|
|
|
<p style="line-height: 25px; font-size: 14px">
|
|
|
|
|
波士顿矩阵（BCG
|
|
|
|
|
Matrix），又称市场增长率-相对市场份额矩阵，由美国著名的管理学家、波士顿咨询公司创始人布鲁斯·亨德森于1970年首创，它是通过销售增长率（反应市场引力的指标）和市场占有率（反应企业实力的指标）来分析决定企业的产品结构。<br />
|
|
|
|
|
市场吸引力包括企业销售量增长率、目标市场容量、竞争对手强弱、利润高低等。其中最重要的是反映市场引力的综合指标——销售增长率，这是决定企业产品结构是否合理的外在因素。<br />
|
|
|
|
|
波士顿矩阵（BCG Matrix），又称市场增长率-相对市场份额矩阵，由美国著名的管理学家、波士顿咨询公司创始人布鲁斯·亨德森于1970年首创，它是通过销售增长率（反应市场引力的指标）和市场占有率（反应企业实力的指标）来分析决定企业的产品结构。
|
|
|
|
|
<br />
|
|
|
|
|
市场吸引力包括企业销售量增长率、目标市场容量、竞争对手强弱、利润高低等。其中最重要的是反映市场引力的综合指标——销售增长率，这是决定企业产品结构是否合理的外在因素。
|
|
|
|
|
<br />
|
|
|
|
|
企业实力包括市场占有率、技术、设备、资金利用能力等，其中市场占有率是决定企业产品结构的内在因素，他直接显示出企业的竞争实力。
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<img src="@/assets/images/u3678.png" alt="" /><br />
|
|
|
|
|
<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 /><br />
|
|
|
|
|
波士顿矩阵将产品类型分为四种：
|
|
|
|
|
<br />
|
|
|
|
|
1，明星类产品：高增长且高市占，发展前景好，竞争力强，需加大投资以支持其发展；
|
|
|
|
|
<br />
|
|
|
|
|
2，问题类产品：高增长但低市占，发展前景好但市场开拓不足，需谨慎投资；
|
|
|
|
|
<br />
|
|
|
|
|
3，现金牛产品：低增长但高市占，成熟市场的领导者，应降低投资，维持市占并延缓衰退；
|
|
|
|
|
<br />
|
|
|
|
|
4，瘦狗类产品：低增长且低市占，理论率低甚至亏损，应采取撤退战略。
|
|
|
|
|
</span>
|
|
|
|
|
<br />
|
|
|
|
|
<br />
|
|
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
|
|
当波士顿矩阵应用于客户画像时候，可以大致分析出不同用户的客户画像：<br />
|
|
|
|
|
1、消费次数超过平均值，每次消费力度也超过平均水平的客户：判定为明星客户，这类客户需要重点关注，并给予最高的礼遇；<br />
|
|
|
|
|
2、消费次数超过平均值，但每次消费力度未达到平均水平的客户：被判定为现金流客户，这类客户通常消费频次比较频繁，能给企业带来较为稳定的现金流，这类客户是企业利润基石；<br />
|
|
|
|
|
3、消费未达到平均值，但每次消费力度超过平均水平的客户：是问题客户，这类客户最有希望转化为明星客户，但是因为客户存在一定的潜在问题，导致消费频次不高，这类客户需要利用客服进行重点跟进和长期跟踪；<br />
|
|
|
|
|
4、消费未达到平均值，消费力度也未达到平均水平的客户：属于瘦狗客户，这类客户通常占企业客户的大多数，只需要一般性维护，不需要投入重点维系。<br /> </span
|
|
|
|
|
><br />
|
|
|
|
|
当波士顿矩阵应用于客户画像时候，可以大致分析出不同用户的客户画像：
|
|
|
|
|
<br />
|
|
|
|
|
1、消费次数超过平均值，每次消费力度也超过平均水平的客户：判定为明星客户，这类客户需要重点关注，并给予最高的礼遇；
|
|
|
|
|
<br />
|
|
|
|
|
2、消费次数超过平均值，但每次消费力度未达到平均水平的客户：被判定为现金流客户，这类客户通常消费频次比较频繁，能给企业带来较为稳定的现金流，这类客户是企业利润基石；
|
|
|
|
|
<br />
|
|
|
|
|
3、消费未达到平均值，但每次消费力度超过平均水平的客户：是问题客户，这类客户最有希望转化为明星客户，但是因为客户存在一定的潜在问题，导致消费频次不高，这类客户需要利用客服进行重点跟进和长期跟踪；
|
|
|
|
|
<br />
|
|
|
|
|
4、消费未达到平均值，消费力度也未达到平均水平的客户：属于瘦狗客户，这类客户通常占企业客户的大多数，只需要一般性维护，不需要投入重点维系。
|
|
|
|
|
<br />
|
|
|
|
|
</span>
|
|
|
|
|
<br />
|
|
|
|
|
<img src="@/assets/images/u3682.png" alt="" />
|
|
|
|
|
</template>
|
|
|
|
|
</pop-modal>
|
|
|
|
|
@ -747,10 +690,7 @@ const step3EchartInit = () => {
|
|
|
|
|
// { seriesIndex: 0 },
|
|
|
|
|
// pointInPixel
|
|
|
|
|
// );
|
|
|
|
|
pointInGrid.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
pointInGrid.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
|
|
|
|
|
// 转换Y轴坐标
|
|
|
|
|
// let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
|
|
|
|
|
// x轴数据的索引值
|
|
|
|
|
@ -852,10 +792,7 @@ const step4EchartInit = () => {
|
|
|
|
|
const pointInPixel = [param.offsetX, param.offsetY];
|
|
|
|
|
console.log("pointInPixel4", pointInPixel);
|
|
|
|
|
//将偏移值转化为坐标值
|
|
|
|
|
pointInGridStep4.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
pointInGridStep4.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
|
|
|
|
|
console.log("pointInGrid4", pointInGridStep4.value);
|
|
|
|
|
option2.value.series[0].data.push({
|
|
|
|
|
value: pointInGridStep4.value,
|
|
|
|
|
@ -1137,37 +1074,26 @@ const step5EchartInit = () => {
|
|
|
|
|
const pointInPixel = [param.offsetX, param.offsetY];
|
|
|
|
|
console.log("pointInPixel5", pointInPixel);
|
|
|
|
|
//将偏移值转化为坐标值
|
|
|
|
|
pointInGridStep5.value = myChart.convertFromPixel(
|
|
|
|
|
{ seriesIndex: 0 },
|
|
|
|
|
pointInPixel
|
|
|
|
|
);
|
|
|
|
|
pointInGridStep5.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
|
|
|
|
|
console.log("pointInGrid5", pointInGridStep5.value);
|
|
|
|
|
if (pointInGridStep5.value[0] > 5 && pointInGridStep5.value[1] > 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].itemStyle.color = drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[0][0].name = drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] < 5 && pointInGridStep5.value[1] > 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].itemStyle.color = drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[1][0].name = drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] < 5 && pointInGridStep5.value[1] < 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].itemStyle.color = drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[2][0].name = drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
if (pointInGridStep5.value[0] > 5 && pointInGridStep5.value[1] < 1000) {
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].itemStyle.color =
|
|
|
|
|
drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].name =
|
|
|
|
|
drawPointNameStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].itemStyle.color = drawPointColorStep5.value;
|
|
|
|
|
optionStep5.value.series[0].markArea.data[3][0].name = drawPointNameStep5.value;
|
|
|
|
|
console.log(optionStep5.value);
|
|
|
|
|
}
|
|
|
|
|
optionStep5.value && myChart.setOption(optionStep5.value);
|
|
|
|
|
@ -1213,6 +1139,10 @@ const step1Submit = () => {
|
|
|
|
|
console.log(step1Error.value, "错误数");
|
|
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
|
|
step1AnswerFlag.value = true;
|
|
|
|
|
for (let k in step1Data.value) {
|
|
|
|
|
step2Data.value[k].amount = step1Data.value[k].params1;
|
|
|
|
|
step2Data.value[k].account = step1Data.value[k].params2;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const step2Submit = () => {
|
|
|
|
|
step2Error.value = 0;
|
|
|
|
|
@ -1235,34 +1165,22 @@ const step3Submit = () => {
|
|
|
|
|
for (let i in option.value.series[0].data) {
|
|
|
|
|
console.log(option.value.series[0].data[i]);
|
|
|
|
|
if (option.value.series[0].data[i].name == "A") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 3 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 800
|
|
|
|
|
) {
|
|
|
|
|
if (Math.round(option.value.series[0].data[i].value[0]) != 3 || Math.round(option.value.series[0].data[i].value[1]) != 800) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "B") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 4 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 1200
|
|
|
|
|
) {
|
|
|
|
|
if (Math.round(option.value.series[0].data[i].value[0]) != 4 || Math.round(option.value.series[0].data[i].value[1]) != 1200) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "C") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 6 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 600
|
|
|
|
|
) {
|
|
|
|
|
if (Math.round(option.value.series[0].data[i].value[0]) != 6 || Math.round(option.value.series[0].data[i].value[1]) != 600) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (option.value.series[0].data[i].name == "D") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[0]) != 7 ||
|
|
|
|
|
Math.round(option.value.series[0].data[i].value[1]) != 1400
|
|
|
|
|
) {
|
|
|
|
|
if (Math.round(option.value.series[0].data[i].value[0]) != 7 || Math.round(option.value.series[0].data[i].value[1]) != 1400) {
|
|
|
|
|
step3Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -1276,10 +1194,7 @@ const step4Submit = () => {
|
|
|
|
|
for (let i in option2.value.series[0].data) {
|
|
|
|
|
console.log(option2.value.series[0].data[i]);
|
|
|
|
|
if (option2.value.series[0].data[i].name == "A") {
|
|
|
|
|
if (
|
|
|
|
|
Math.round(option2.value.series[0].data[i].value[0]) != 5 ||
|
|
|
|
|
Math.round(option2.value.series[0].data[i].value[1]) != 1000
|
|
|
|
|
) {
|
|
|
|
|
if (Math.round(option2.value.series[0].data[i].value[0]) != 5 || Math.round(option2.value.series[0].data[i].value[1]) != 1000) {
|
|
|
|
|
step4Error.value++;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -1319,22 +1234,11 @@ const downloadData = () => {
|
|
|
|
|
window.open(baseUrl + "/api/downDataByUserPortrait/bostonMatrixAnalysisData");
|
|
|
|
|
};
|
|
|
|
|
const submitData = () => {
|
|
|
|
|
if (
|
|
|
|
|
!step1AnswerFlag.value ||
|
|
|
|
|
!step2AnswerFlag.value ||
|
|
|
|
|
!step3AnswerFlag.value ||
|
|
|
|
|
!step4AnswerFlag.value ||
|
|
|
|
|
!step5AnswerFlag.value
|
|
|
|
|
) {
|
|
|
|
|
if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value || !step5AnswerFlag.value) {
|
|
|
|
|
proxy.$modal.msgError("请先完成所有步骤！");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
errorNum.value =
|
|
|
|
|
step1Error.value +
|
|
|
|
|
step2Error.value +
|
|
|
|
|
step3Error.value +
|
|
|
|
|
step4Error.value +
|
|
|
|
|
step5Error.value;
|
|
|
|
|
errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value + step5Error.value;
|
|
|
|
|
console.log(errorNum.value, "总错误次数");
|
|
|
|
|
portraitModel
|
|
|
|
|
.submit({
|
|
|
|
|
@ -1599,4 +1503,8 @@ defineExpose({
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table td {
|
|
|
|
|
padding-top: 4px;
|
|
|
|
|
padding-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
HeHaonan
2 years ago