第二轮bugfix

dev-QQq
HeHaonan 2 years ago
parent 7d4e4fcd6b
commit ec749733b8

@ -5,4 +5,4 @@ VITE_APP_TITLE = 数字营销实训系统
VITE_APP_ENV = 'development' VITE_APP_ENV = 'development'
# 若依管理系统/开发环境 # 若依管理系统/开发环境
VITE_APP_BASE_API = 'http://192.168.2.16:9868' VITE_APP_BASE_API = 'http://118.31.7.2:9868'

@ -162,7 +162,7 @@ export const dynamicRoutes = [
path: "/evaluation", path: "/evaluation",
component: () => import("@/views/learningCenter/evaluation.vue"), component: () => import("@/views/learningCenter/evaluation.vue"),
name: "evaluation", name: "evaluation",
meta: { title: "知识测评", icon: "知识测评", affix: true }, meta: { title: "知识测评", icon: "学习测评", affix: true },
}, },
], ],
}, },

@ -201,7 +201,7 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<el-table <el-table
:data="step3Data" :data="step3Data"
style="width: 1000px" style="width: 700px"
border border
:header-cell-style="{ :header-cell-style="{
color: '#fff', color: '#fff',
@ -1525,4 +1525,8 @@ defineExpose({
color: #fff; color: #fff;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -24,9 +24,7 @@
<img src="@/assets/images/caseIcon.png" alt="" /> <img src="@/assets/images/caseIcon.png" alt="" />
<span>案例背景</span> <span>案例背景</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">现有以下某商店的交易原始数据需要采用帕累托分析方法对商品进行分类</span>
现有以下某商店的交易原始数据需要采用帕累托分析方法对商品进行分类
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
@ -38,12 +36,9 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="交易单号" align="center" prop="id"> <el-table-column label="交易单号" align="center" prop="id"></el-table-column>
</el-table-column> <el-table-column label="商品名称" align="center" prop="name"></el-table-column>
<el-table-column label="商品名称" align="center" prop="name"> <el-table-column label="销售额" align="center" prop="amount"></el-table-column>
</el-table-column>
<el-table-column label="销售额" align="center" prop="amount">
</el-table-column>
</el-table> </el-table>
<div class="download" @click="downloadData"></div> <div class="download" @click="downloadData"></div>
</div> </div>
@ -54,9 +49,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第一步统计各类商品累计销售额</span> <span>第一步统计各类商品累计销售额</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以商品为统计单元计算各类商品的销售额</span>
以商品为统计单元计算各类商品的销售额
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step1Data" :data="step1Data"
@ -68,16 +61,10 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="商品名称" align="center" prop="name"> <el-table-column label="商品名称" align="center" prop="name"></el-table-column>
</el-table-column>
<el-table-column label="销售额" align="center" prop="amount"> <el-table-column label="销售额" align="center" prop="amount">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="请输入" style="width: 130px"></el-input>
v-model="scope.row.params"
placeholder="请输入"
style="width: 130px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -90,9 +77,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第二步排序</span> <span>第二步排序</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以累计销售额为排序基准按照倒序进行排序</span>
以累计销售额为排序基准按照倒序进行排序
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step2Data" :data="step2Data"
@ -104,31 +89,13 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="商品名称" align="center" prop="name"> <el-table-column label="商品名称" align="center" prop="name"></el-table-column>
</el-table-column> <el-table-column label="销售额" align="center" prop="amount"></el-table-column>
<el-table-column label="销售额" align="center" prop="amount">
</el-table-column>
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<div <div style="display: flex; align-items: center; justify-content: center">
style=" <img src="@/assets/images/上.png" alt="" style="margin-right: 10px; cursor: pointer" @click="moveUp(scope.$index, scope.row)" />
display: flex; <img src="@/assets/images/下.png" alt="" style="cursor: pointer" @click="moveDown(scope.$index, scope.row)" />
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> </div>
</template> </template>
</el-table-column> </el-table-column>
@ -142,9 +109,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第三步计算累计销售额占比</span> <span>第三步计算累计销售额占比</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">计算各个商品的销售额占比并以此通过累加计算累计销售额占比</span>
计算各个商品的销售额占比并以此通过累加计算累计销售额占比
</span>
<div style="margin-top: 10px; display: flex" v-if="step2AnswerFlag"> <div style="margin-top: 10px; display: flex" v-if="step2AnswerFlag">
<el-table <el-table
:data="step3Data" :data="step3Data"
@ -156,38 +121,18 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="商品名称" align="center" prop="data1"> <el-table-column label="商品名称" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="销售额" align="center" prop="data2"></el-table-column>
<el-table-column label="销售额" align="center" prop="data2"> <el-table-column label="销售额占比(%" align="center" prop="data3">
</el-table-column>
<el-table-column
label="销售额占比(%"
align="center"
prop="data3"
>
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 110px"></el-input>
v-model="scope.row.params1" %
placeholder="请输入"
style="width: 110px"
>
</el-input
>%
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="累计销售额占比(%" align="center" prop="data4">
label="累计销售额占比(%"
align="center"
prop="data4"
>
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 110px"></el-input>
v-model="scope.row.params2" %
placeholder="请输入"
style="width: 110px"
>
</el-input
>%
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -200,9 +145,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第四步划分商品类型</span> <span>第四步划分商品类型</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">我们按照0-80%80%-90%90%-100%将商品分成ABC3个类别然后对于这3个类别的产品做区别管理以提高效益</span>
我们按照0-80%80%-90%90%-100%将商品分成ABC3个类别然后对于这3个类别的产品做区别管理以提高效益
</span>
<el-table <el-table
:show-header="false" :show-header="false"
:data="typeData" :data="typeData"
@ -214,15 +157,8 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column <el-table-column label="用户ID" align="center" prop="data1" width="160"></el-table-column>
label="用户ID" <el-table-column label="用户名称" align="center" prop="data2"></el-table-column>
align="center"
prop="data1"
width="160"
>
</el-table-column>
<el-table-column label="用户名称" align="center" prop="data2">
</el-table-column>
</el-table> </el-table>
<div style="margin-top: 10px; display: flex" v-if="step3AnswerFlag"> <div style="margin-top: 10px; display: flex" v-if="step3AnswerFlag">
<el-table <el-table
@ -235,23 +171,12 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="商品名称" align="center" prop="data1"> <el-table-column label="商品名称" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="销售额" align="center" prop="data2"></el-table-column>
<el-table-column label="销售额" align="center" prop="data2"> <el-table-column label="累计销售额占比(%" align="center" prop="data3"></el-table-column>
</el-table-column>
<el-table-column
label="累计销售额占比(%"
align="center"
prop="data3"
>
</el-table-column>
<el-table-column label="划分商品类型" align="center" prop="data4"> <el-table-column label="划分商品类型" align="center" prop="data4">
<template #default="scope"> <template #default="scope">
<el-select <el-select v-model="scope.row.params" placeholder="请选择" style="width: 100px">
v-model="scope.row.params"
placeholder="请选择"
style="width: 100px"
>
<el-option :label="'A类商品'" :value="'A类商品'" /> <el-option :label="'A类商品'" :value="'A类商品'" />
<el-option :label="'B类商品'" :value="'B类商品'" /> <el-option :label="'B类商品'" :value="'B类商品'" />
<el-option :label="'C类商品'" :value="'C类商品'" /> <el-option :label="'C类商品'" :value="'C类商品'" />
@ -268,58 +193,31 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第五步绘制帕累托图</span> <span>第五步绘制帕累托图</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以分析表的商品名称为X轴销售额为左侧Y轴累计销售额占比为右侧Y轴绘制帕累托图</span>
以分析表的商品名称为X轴销售额为左侧Y轴累计销售额占比为右侧Y轴绘制帕累托图
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div id="echarts" style="width: 500px; height: 400px"></div> <div id="echarts" style="width: 500px; height: 400px"></div>
<div class="submit" @click="step5Submit"></div> <div class="submit" @click="step5Submit"></div>
</div> </div>
<div class="chartXData"> <div class="chartXData">
<el-select <el-select v-model="chartParam1" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
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-option :label="'婴儿用品'" :value="'婴儿用品'" /> <el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" /> <el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select> </el-select>
<el-select <el-select v-model="chartParam2" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
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-option :label="'婴儿用品'" :value="'婴儿用品'" /> <el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" /> <el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select> </el-select>
<el-select <el-select v-model="chartParam3" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
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-option :label="'婴儿用品'" :value="'婴儿用品'" /> <el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" /> <el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select> </el-select>
<el-select <el-select v-model="chartParam4" placeholder="请选择" style="width: 85px" class="XdataItem" size="small" @change="selectChange">
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-option :label="'婴儿用品'" :value="'婴儿用品'" /> <el-option :label="'婴儿用品'" :value="'婴儿用品'" />
@ -333,14 +231,10 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第六步针对不同类别的商品制定不同的库存策略</span> <span>第六步针对不同类别的商品制定不同的库存策略</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">一般来说在商品的库存管理策略中</span>
一般来说在商品的库存管理策略中
</span>
<div class="customerType" style="width: 1115px"> <div class="customerType" style="width: 1115px">
<img src="@/assets/images/商品a.png" alt="" /> <img src="@/assets/images/商品a.png" alt="" />
<span <span>A类商品对公司销售额贡献最大这种商品备货周期短在保证安全库存的情况下应该小批量多批次按需储存尽可能降低库存总量减少仓储管理成本但如果控制不好库存很容易出现断货风险</span>
>A类商品对公司销售额贡献最大这种商品备货周期短在保证安全库存的情况下应该小批量多批次按需储存尽可能降低库存总量减少仓储管理成本但如果控制不好库存很容易出现断货风险</span
>
</div> </div>
<div class="customerType" style="width: 1115px"> <div class="customerType" style="width: 1115px">
<img src="@/assets/images/商品b.png" alt="" /> <img src="@/assets/images/商品b.png" alt="" />
@ -348,25 +242,30 @@
</div> </div>
<div class="customerType" style="width: 1115px"> <div class="customerType" style="width: 1115px">
<img src="@/assets/images/商品c.png" alt="" /> <img src="@/assets/images/商品c.png" alt="" />
<span <span>C类商品属于长尾商品备货周期更长最好是集中采购并适当增大库存量相应减少订货次数</span>
>C类商品属于长尾商品备货周期更长最好是集中采购并适当增大库存量相应减少订货次数</span
>
</div> </div>
</div> </div>
</div> </div>
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false"> <pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
<template v-slot:content> <template v-slot:content>
<p> <p>
帕累托分析法源于经典的二八法则意大利经济学家维尔弗雷多·帕累托于1906年提出了著名的关于意大利社会财务分配的研究结论20%的人口掌握了80%的社会财富这个结论对大多数国家的社会财富分配情况都成立因此帕累托法则又被称为80/20法则<br /><br /> 帕累托分析法源于经典的二八法则意大利经济学家维尔弗雷多·帕累托于1906年提出了著名的关于意大利社会财务分配的研究结论20%的人口掌握了80%的社会财富这个结论对大多数国家的社会财富分配情况都成立因此帕累托法则又被称为80/20法则
帕累托分析的核心观点是在许多情况下大部分的问题效益或成本都来自于少数的要素换句话说少数关键要素占据了绝大多数的结果这一规律在许多领域都具有普适性例如<br /><br /> <br />
在企业中80%的利润可能来自于20%的产品或客户<br /> <br />
在销售中80%的销售额可能来自于20%的销售员或产品<br /> 帕累托分析的核心观点是在许多情况下大部分的问题效益或成本都来自于少数的要素换句话说少数关键要素占据了绝大多数的结果这一规律在许多领域都具有普适性例如
在质量控制中80%的缺陷可能来自于20%的原因或工序<br /><br /> <br />
ABC 分类法全称应为 ABC 分类库存控制法 <br />
又称帕累托分析法或巴雷托分析法柏拉图分析主次因分析法 在企业中80%的利润可能来自于20%的产品或客户
ABC分析法ABC 管理法平常也称之为80 20规则 <br />
在销售中80%的销售额可能来自于20%的销售员或产品
<br />
在质量控制中80%的缺陷可能来自于20%的原因或工序
<br />
<br />
ABC 分类法全称应为 ABC 分类库存控制法 又称帕累托分析法或巴雷托分析法柏拉图分析主次因分析法 ABC分析法ABC 管理法平常也称之为80 20规则
</p> </p>
<img src="@/assets/images/u3323.png" alt="" /><br /> <img src="@/assets/images/u3323.png" alt="" />
<br />
<img src="@/assets/images/u3324.png" alt="" /> <img src="@/assets/images/u3324.png" alt="" />
</template> </template>
</pop-modal> </pop-modal>
@ -619,7 +518,7 @@ onBeforeUnmount(() => {
}); });
onMounted(() => { onMounted(() => {
getData(); getData();
initCharts(); // initCharts();
}); });
const initCharts = () => { const initCharts = () => {
var chartDom = document.getElementById("echarts"); var chartDom = document.getElementById("echarts");
@ -690,7 +589,8 @@ const initCharts = () => {
return value + " 元"; return value + " 元";
}, },
}, },
data: [5900, 2400, 1100, 600], // data: [5900, 2400, 1100, 600],
data: [step3Data.value[0].data2, step3Data.value[1].data2, step3Data.value[2].data2, step3Data.value[3].data2],
}, },
{ {
@ -702,7 +602,8 @@ const initCharts = () => {
return value + " %"; return value + " %";
}, },
}, },
data: [59, 83, 94, 100], // data: [59, 83, 94, 100],
data: [step3Data.value[0].params2, step3Data.value[1].params2, step3Data.value[2].params2, step3Data.value[3].params2],
}, },
], ],
}; };
@ -773,11 +674,7 @@ const step1Submit = () => {
}; };
const step2Submit = () => { const step2Submit = () => {
step2Error.value = 0; step2Error.value = 0;
if ( 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)) {
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; step2Error.value = 0;
} else { } else {
step2Error.value = 1; step2Error.value = 1;
@ -834,6 +731,7 @@ const step3Submit = () => {
step4Data.value[2].data3 = step3Data.value[2].params2; step4Data.value[2].data3 = step3Data.value[2].params2;
step4Data.value[3].data3 = step3Data.value[3].params2; step4Data.value[3].data3 = step3Data.value[3].params2;
step3AnswerFlag.value = true; step3AnswerFlag.value = true;
initCharts();
}; };
const step4Submit = () => { const step4Submit = () => {
step4Error.value = 0; step4Error.value = 0;
@ -863,12 +761,7 @@ const step4Submit = () => {
}; };
const step5Submit = () => { const step5Submit = () => {
step5Error.value = 0; step5Error.value = 0;
if ( if (chartParam1.value == "" || chartParam2.value == "" || chartParam3.value == "" || chartParam4.value == "") {
chartParam1.value == "" ||
chartParam2.value == "" ||
chartParam3.value == "" ||
chartParam4.value == ""
) {
proxy.$modal.msgError("请先完成所有填空"); proxy.$modal.msgError("请先完成所有填空");
return; return;
} }
@ -996,17 +889,11 @@ const selectChange = (item) => {
}; };
const submitData = () => { const submitData = () => {
console.log("tj"); console.log("tj");
if ( if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
!step1AnswerFlag.value ||
!step2AnswerFlag.value ||
!step3AnswerFlag.value ||
!step4AnswerFlag.value
) {
proxy.$modal.msgError("请先完成所有步骤!"); proxy.$modal.msgError("请先完成所有步骤!");
return; return;
} }
errorNum.value = errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value;
step1Error.value + step2Error.value + step3Error.value + step4Error.value;
console.log(errorNum.value, "总错误次数"); console.log(errorNum.value, "总错误次数");
portraitModel portraitModel
.submit({ .submit({
@ -1148,4 +1035,8 @@ defineExpose({
background-color: #002652 !important; background-color: #002652 !important;
color: #fff; color: #fff;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -1032,4 +1032,8 @@ defineExpose({
background-color: #002652 !important; background-color: #002652 !important;
color: #fff; color: #fff;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

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

@ -1011,4 +1011,8 @@ defineExpose({
background-color: #002652 !important; background-color: #002652 !important;
color: #fff; color: #fff;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -1566,4 +1566,8 @@ defineExpose({
color: #fff; color: #fff;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -218,48 +218,45 @@
label="订单ID" label="订单ID"
align="center" align="center"
prop="data1" prop="data1"
width="120"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="客户ID" label="客户ID"
align="center" align="center"
prop="data2" prop="data2"
width="120"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="购买金额" label="购买金额"
align="center" align="center"
prop="data3" prop="data3"
width="120"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="购买商品" label="购买商品"
align="center" align="center"
prop="data4" prop="data4"
width="120"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="订单日期" label="订单日期"
align="center" align="center"
prop="data5" prop="data5"
width="120" width="100"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="首购订单&复购订单" label="首购订单&复购订单"
align="center" align="center"
prop="data6" prop="data6"
width="120" width="150"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="第二次购买与首购的时间间隔" label="第二次购买与首购的时间间隔"
align="center" align="center"
prop="amount" prop="amount"
width="210"
> >
<template #default="scope"> <template #default="scope">
<el-input <el-input
@ -272,7 +269,7 @@
> >
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="时间间隔分组" align="center" prop="amount"> <el-table-column label="时间间隔分组" align="center" prop="amount" width="110">
<template #default="scope"> <template #default="scope">
<el-select <el-select
v-model="scope.row.params2" v-model="scope.row.params2"
@ -346,7 +343,7 @@
</div> </div>
<el-table <el-table
:data="step5DataTable2" :data="step5DataTable2"
style="width: 270px" style="width: 240px"
border border
:header-cell-style="{ :header-cell-style="{
color: '#fff', color: '#fff',
@ -409,7 +406,7 @@
label="复购率最高的用户" label="复购率最高的用户"
align="center" align="center"
prop="name" prop="name"
width="130" width="140"
> >
<template #default="scope"> <template #default="scope">
<el-select <el-select
@ -1380,6 +1377,11 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
if (columnIndex === 6) { if (columnIndex === 6) {
return [2, 1]; return [2, 1];
} }
}
if (rowIndex === 1) {
if (columnIndex === 6) {
return [0, 0];
}
} }
if (rowIndex === 0) { if (rowIndex === 0) {
if (columnIndex === 7) { if (columnIndex === 7) {
@ -1391,6 +1393,11 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
return [2, 1]; return [2, 1];
} }
} }
if (rowIndex === 3) {
if (columnIndex === 6) {
return [0, 0];
}
}
if (rowIndex === 2) { if (rowIndex === 2) {
if (columnIndex === 7) { if (columnIndex === 7) {
return [2, 1]; return [2, 1];
@ -1406,6 +1413,11 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
return [2, 1]; return [2, 1];
} }
} }
if (rowIndex === 5) {
if (columnIndex === 6) {
return [0, 0];
}
}
if (rowIndex === 6) { if (rowIndex === 6) {
if (columnIndex === 6) { if (columnIndex === 6) {
return [2, 1]; return [2, 1];
@ -1416,6 +1428,11 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
return [2, 1]; return [2, 1];
} }
} }
if (rowIndex === 7) {
if (columnIndex === 6) {
return [0, 0];
}
}
}; };
const handleChangeTime = (e) => { const handleChangeTime = (e) => {
console.log(e); console.log(e);
@ -2090,4 +2107,8 @@ defineExpose({
background-color: #002652 !important; background-color: #002652 !important;
color: #fff; color: #fff;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -25,17 +25,18 @@
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
style="width: 1450px" style="width: 1250px"
border border
:header-cell-style="{ :header-cell-style="{
color: '#fff', color: '#fff',
fontSize: '14px', fontSize: '14px',
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="日期" align="center" prop="date"> <el-table-column label="日期" align="center" prop="date">
</el-table-column> </el-table-column>
<el-table-column label="新增用户数" align="center" prop="addNum"> <el-table-column label="新增用户数" align="center" prop="addNum" width="120">
</el-table-column> </el-table-column>
<el-table-column label="次日" align="center" prop="day2"> <el-table-column label="次日" align="center" prop="day2">
</el-table-column> </el-table-column>
@ -1920,4 +1921,8 @@ defineExpose({
background-color: #002652 !important; background-color: #002652 !important;
color: #fff; color: #fff;
} }
::v-deep .el-table td {
padding-top: 3px;
padding-bottom: 3px;
}
</style> </style>

@ -17,7 +17,7 @@
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
style="width: 650px" style="width: 550px"
border border
:header-cell-style="{ :header-cell-style="{
color: '#fff', color: '#fff',
@ -1406,4 +1406,8 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
margin-left: 20px; margin-left: 20px;
} }
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

@ -84,7 +84,7 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step1Data" :data="step1Data"
style="width: 550px" style="width: 600px"
border border
:header-cell-style="{ :header-cell-style="{
color: '#fff', color: '#fff',
@ -125,6 +125,7 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
label="日活跃平均时长(分钟)" label="日活跃平均时长(分钟)"
align="center" align="center"
prop="day3" prop="day3"
width="180"
> >
<template #default="scope"> <template #default="scope">
<el-input <el-input
@ -2072,4 +2073,8 @@ defineExpose({
color: #fff; color: #fff;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td {
padding-top: 4px;
padding-bottom: 4px;
}
</style> </style>

Loading…
Cancel
Save