实训提交后用户提示问题

fix/non-blocking-route-navigation
HeHaonan 2 years ago
parent 3f2046aeaf
commit c100ba91b5

File diff suppressed because one or more lines are too long

@ -64,7 +64,13 @@
<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>
<div style="display: flex; align-items: center; justify-content: center">
<el-input v-model="scope.row.params" placeholder="请输入" style="width: 130px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError" style="color: red">X</span>
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
@ -122,17 +128,29 @@
}"
>
<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="data2" width="100"></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>
%
<div style="display: flex; align-items: center; justify-content: center">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 110px"></el-input>
%
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="累计销售额占比(%)" align="center" prop="data4">
<el-table-column label="累计销售额占比(%)" align="center" prop="data4" width="200">
<template #default="scope">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 110px"></el-input>
%
<div style="display: flex; align-items: center; justify-content: center">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 110px"></el-input>
%
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
@ -176,11 +194,17 @@
<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>
<div style="display: flex; align-items: center; justify-content: center">
<el-select v-model="scope.row.params" placeholder="请选择" style="width: 100px">
<el-option :label="'A类商品'" :value="'A类商品'" />
<el-option :label="'B类商品'" :value="'B类商品'" />
<el-option :label="'C类商品'" :value="'C类商品'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError" style="color: red">X</span>
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
@ -199,30 +223,54 @@
<div class="submit" @click="step5Submit" v-if="step3AnswerFlag">提交</div>
</div>
<div class="chartXData" v-if="step3AnswerFlag">
<el-select v-model="chartParam1" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<el-select v-model="chartParam2" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<el-select v-model="chartParam3" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<el-select v-model="chartParam4" placeholder="请选择" style="width: 85px" class="XdataItem" size="small" @change="selectChange">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center">
<el-select v-model="chartParam1" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<div v-if="showAnswerFlag">
<span v-if="chartParam1 != '男士配饰'" style="color: red">X</span>
<span v-if="chartParam1 == '男士配饰'" style="color: #00bb00">√</span>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<el-select v-model="chartParam2" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<div v-if="showAnswerFlag">
<span v-if="chartParam2 != '床上用品'" style="color: red">X</span>
<span v-if="chartParam2 == '床上用品'" style="color: #00bb00">√</span>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<el-select v-model="chartParam3" placeholder="请选择" style="width: 85px" class="XdataItem" size="small">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<div v-if="showAnswerFlag">
<span v-if="chartParam3 != '婴儿用品'" style="color: red">X</span>
<span v-if="chartParam3 == '婴儿用品'" style="color: #00bb00">√</span>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: center">
<el-select v-model="chartParam4" placeholder="请选择" style="width: 85px" class="XdataItem" size="small" @change="selectChange">
<el-option :label="'男士配饰'" :value="'男士配饰'" />
<el-option :label="'床上用品'" :value="'床上用品'" />
<el-option :label="'婴儿用品'" :value="'婴儿用品'" />
<el-option :label="'儿童服装'" :value="'儿童服装'" />
</el-select>
<div v-if="showAnswerFlag">
<span v-if="chartParam4 != '儿童服装'" style="color: red">X</span>
<span v-if="chartParam4 == '儿童服装'" style="color: #00bb00">√</span>
</div>
</div>
</div>
</div>
<div class="line"></div>
@ -280,6 +328,7 @@ import * as portraitModel from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const showAnswerFlag = ref(false);
const dialogVisible = ref(false);
const knowledgeFlag = ref(false);
const errorNum = ref(0);
@ -653,15 +702,27 @@ const step1Submit = () => {
}
if (step1Data.value[0].params && step1Data.value[0].params !== "5900") {
step1Error.value++;
step1Data.value[0].isError = true;
} else {
step1Data.value[0].isError = false;
}
if (step1Data.value[1].params && step1Data.value[1].params !== "600") {
step1Error.value++;
step1Data.value[1].isError = true;
} else {
step1Data.value[1].isError = false;
}
if (step1Data.value[2].params && step1Data.value[2].params !== "1100") {
step1Error.value++;
step1Data.value[2].isError = true;
} else {
step1Data.value[2].isError = false;
}
if (step1Data.value[3].params && step1Data.value[3].params !== "2400") {
step1Error.value++;
step1Data.value[3].isError = true;
} else {
step1Data.value[3].isError = false;
}
console.log(step1Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -698,27 +759,51 @@ const step3Submit = () => {
}
if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "59") {
step3Error.value++;
step3Data.value[0].isError1 = true;
} else {
step3Data.value[0].isError1 = false;
}
if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "59") {
step3Error.value++;
step3Data.value[0].isError2 = true;
} else {
step3Data.value[0].isError2 = false;
}
if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "24") {
step3Error.value++;
step3Data.value[1].isError1 = true;
} else {
step3Data.value[1].isError1 = false;
}
if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "83") {
step3Error.value++;
step3Data.value[1].isError2 = true;
} else {
step3Data.value[1].isError2 = false;
}
if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "11") {
step3Error.value++;
step3Data.value[2].isError1 = true;
} else {
step3Data.value[2].isError1 = false;
}
if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "94") {
step3Error.value++;
step3Data.value[2].isError2 = true;
} else {
step3Data.value[2].isError2 = false;
}
if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "6") {
step3Error.value++;
step3Data.value[3].isError1 = true;
} else {
step3Data.value[3].isError1 = false;
}
if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "100") {
step3Error.value++;
step3Data.value[3].isError2 = true;
} else {
step3Data.value[3].isError2 = false;
}
console.log("错误数", step3Error.value);
proxy.$modal.msgSuccess("提交成功");
@ -745,15 +830,27 @@ const step4Submit = () => {
}
if (step4Data.value[0].params && step4Data.value[0].params !== "A类商品") {
step4Error.value++;
step4Data.value[0].isError = true;
} else {
step4Data.value[0].isError = false;
}
if (step4Data.value[1].params && step4Data.value[1].params !== "B类商品") {
step4Error.value++;
step4Data.value[1].isError = true;
} else {
step4Data.value[1].isError = false;
}
if (step4Data.value[2].params && step4Data.value[2].params !== "C类商品") {
step4Error.value++;
step4Data.value[2].isError = true;
} else {
step4Data.value[2].isError = false;
}
if (step4Data.value[3].params && step4Data.value[3].params !== "C类商品") {
step4Error.value++;
step4Data.value[3].isError = true;
} else {
step4Data.value[3].isError = false;
}
console.log("错误数", step4Error.value);
proxy.$modal.msgSuccess("提交成功");
@ -903,6 +1000,7 @@ const submitData = () => {
})
.then((res) => {
proxy.$modal.msgSuccess("提交成功");
showAnswerFlag.value = true;
})
.catch((error) => {});
};
@ -1007,7 +1105,7 @@ defineExpose({
width: 945px;
height: 26px;
// background: #003b75;
background: #FFF8EE;
background: #fff8ee;
border-radius: 10px;
// border: 1px solid #0052a3;
font-size: 12px;
@ -1017,11 +1115,12 @@ defineExpose({
}
}
.chartXData {
display: flex;
position: relative;
top: -58px;
left: 60px;
left: 50px;
.XdataItem {
margin-right: 15px;
margin-left: 10px;
}
}
}

File diff suppressed because one or more lines are too long

@ -68,12 +68,24 @@
<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>
<div style="display: flex; align-items: center; justify-content: center">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 130px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="消费金额" align="center" prop="amount">
<template #default="scope">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 130px"></el-input>
<div style="display: flex; align-items: center; justify-content: center">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 130px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
@ -102,11 +114,19 @@
<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>
<div v-if="showAnswerFlag & (scope.$index == 4)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</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>
<div v-if="showAnswerFlag & (scope.$index == 4)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -128,18 +148,34 @@
<div class="point">
<div class="pointItem" @click="drawPoint('A', '#009FF1')">绘制A</div>
<span>(3,800)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="pointAError" style="color: red">X</span>
<span v-if="!pointAError" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawPoint('B', '#FB54A1')">绘制B</div>
<span>(4,1200)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="pointBError" style="color: red">X</span>
<span v-if="!pointBError" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawPoint('C', '#FE8D2A')">绘制C</div>
<span>(6,600)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="pointCError" style="color: red">X</span>
<span v-if="!pointCError" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawPoint('D', '#6E70F0')">绘制D</div>
<span>(7,1400)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="pointDError" style="color: red">X</span>
<span v-if="!pointDError" style="color: #00bb00">√</span>
</div>
</div>
</div>
</div>
@ -160,6 +196,10 @@
<div class="point">
<div class="pointItem" @click="drawPointStep4('E', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div>
<span>(5,1000)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="centerPointError" style="color: red">X</span>
<span v-if="!centerPointError" style="color: #00bb00">√</span>
</div>
</div>
<!-- <div class="point">
<div class="pointItem" @click="drawPointStep4('Y', '#FB54A1')">
@ -195,15 +235,31 @@
<div class="drawPoint">
<div class="point">
<div class="pointItem" @click="drawQuadrant('明星客户', 'rgba(52, 134, 207, 0.8)')">明星客户</div>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="markArea1Error" style="color: red">X</span>
<span v-if="!markArea1Error" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawQuadrant('现金流客户', 'rgba(0, 184, 105, 0.8)')">现金流客户</div>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="markArea4Error" style="color: red">X</span>
<span v-if="!markArea4Error" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawQuadrant('问题客户', 'rgba(177, 130, 192, 0.8)')">问题客户</div>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="markArea2Error" style="color: red">X</span>
<span v-if="!markArea2Error" style="color: #00bb00">√</span>
</div>
</div>
<div class="point">
<div class="pointItem" @click="drawQuadrant('瘦狗客户', 'rgba(254, 141, 42, 0.8)')">瘦狗客户</div>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="markArea3Error" style="color: red">X</span>
<span v-if="!markArea3Error" style="color: #00bb00">√</span>
</div>
</div>
</div>
</div>
@ -288,6 +344,7 @@ import { downBlobFile } from "@/utils/index.js";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const showAnswerFlag = ref(false);
const dialogVisible = ref(false);
const knowledgeFlag = ref(false);
const chart1OptionData = ref([]);
@ -301,6 +358,15 @@ const quadrant1Color = ref("");
const quadrant2Color = ref("");
const quadrant3Color = ref("");
const quadrant4Color = ref("");
const pointAError = ref(false);
const pointBError = ref(false);
const pointCError = ref(false);
const pointDError = ref(false);
const centerPointError = ref(false);
const markArea1Error = ref(false);
const markArea2Error = ref(false);
const markArea3Error = ref(false);
const markArea4Error = ref(false);
const step1Data = ref([
{
name: "A",
@ -1224,27 +1290,51 @@ const step1Submit = () => {
}
if (step1Data.value[0].params1 && step1Data.value[0].params1 !== "3") {
step1Error.value++;
step1Data.value[0].isError1 = true;
} else {
step1Data.value[0].isError1 = false;
}
if (step1Data.value[0].params2 && step1Data.value[0].params2 !== "800") {
step1Error.value++;
step1Data.value[0].isError2 = true;
} else {
step1Data.value[0].isError2 = false;
}
if (step1Data.value[1].params1 && step1Data.value[1].params1 !== "4") {
step1Error.value++;
step1Data.value[1].isError1 = true;
} else {
step1Data.value[1].isError1 = false;
}
if (step1Data.value[1].params2 && step1Data.value[1].params2 !== "1200") {
step1Error.value++;
step1Data.value[1].isError2 = true;
} else {
step1Data.value[1].isError2 = false;
}
if (step1Data.value[2].params1 && step1Data.value[2].params1 !== "6") {
step1Error.value++;
step1Data.value[2].isError1 = true;
} else {
step1Data.value[2].isError1 = false;
}
if (step1Data.value[2].params2 && step1Data.value[2].params2 !== "600") {
step1Error.value++;
step1Data.value[2].isError2 = true;
} else {
step1Data.value[2].isError2 = false;
}
if (step1Data.value[3].params1 && step1Data.value[3].params1 !== "7") {
step1Error.value++;
step1Data.value[3].isError1 = true;
} else {
step1Data.value[3].isError1 = false;
}
if (step1Data.value[3].params2 && step1Data.value[3].params2 !== "1400") {
step1Error.value++;
step1Data.value[3].isError2 = true;
} else {
step1Data.value[3].isError2 = false;
}
console.log(step1Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -1262,9 +1352,15 @@ const step2Submit = () => {
}
if (step2Data.value[4].params1 && step2Data.value[4].params1 !== "5") {
step2Error.value++;
step2Data.value[4].isError1 = true;
} else {
step2Data.value[4].isError1 = false;
}
if (step2Data.value[4].params2 && step2Data.value[4].params2 !== "1000") {
step2Error.value++;
step2Data.value[4].isError2 = true;
} else {
step2Data.value[4].isError2 = false;
}
console.log(step2Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -1277,21 +1373,33 @@ const step3Submit = () => {
if (chart1OptionData.value[i].name == "A") {
if (Math.round(chart1OptionData.value[i].value[0]) != 3 || Math.round(chart1OptionData.value[i].value[1]) != 800) {
step3Error.value++;
pointAError.value = true;
} else {
pointAError.value = false;
}
}
if (chart1OptionData.value[i].name == "B") {
if (Math.round(chart1OptionData.value[i].value[0]) != 4 || Math.round(chart1OptionData.value[i].value[1]) != 1200) {
step3Error.value++;
pointBError.value = true;
} else {
pointBError.value = false;
}
}
if (chart1OptionData.value[i].name == "C") {
if (Math.round(chart1OptionData.value[i].value[0]) != 6 || Math.round(chart1OptionData.value[i].value[1]) != 600) {
step3Error.value++;
pointCError.value = true;
} else {
pointCError.value = false;
}
}
if (chart1OptionData.value[i].name == "D") {
if (Math.round(chart1OptionData.value[i].value[0]) != 7 || Math.round(chart1OptionData.value[i].value[1]) != 1400) {
step3Error.value++;
pointDError.value = true;
} else {
pointDError.value = false;
}
}
}
@ -1310,6 +1418,9 @@ const step4Submit = () => {
if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) {
console.log(chart2OptionData.value[i]);
step4Error.value++;
centerPointError.value = true;
} else {
centerPointError.value = false;
}
}
}
@ -1321,15 +1432,27 @@ const step5Submit = () => {
step5Error.value = 0;
if (optionStep5.value.series[0].markArea.data[0][0].name != "明星客户") {
step5Error.value++;
markArea1Error.value = true;
} else {
markArea1Error.value = false;
}
if (optionStep5.value.series[0].markArea.data[1][0].name != "问题客户") {
step5Error.value++;
markArea2Error.value = true;
} else {
markArea2Error.value = false;
}
if (optionStep5.value.series[0].markArea.data[2][0].name != "瘦狗客户") {
step5Error.value++;
markArea3Error.value = true;
} else {
markArea3Error.value = false;
}
if (optionStep5.value.series[0].markArea.data[3][0].name != "现金流客户") {
step5Error.value++;
markArea4Error.value = true;
} else {
markArea4Error.value = false;
}
console.log(step5Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -1362,6 +1485,7 @@ const submitData = () => {
})
.then((res) => {
proxy.$modal.msgSuccess("提交成功");
showAnswerFlag.value = true;
})
.catch((error) => {});
};

@ -74,30 +74,50 @@
<template #default="scope">
<el-input v-if="scope.$index != 0" v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
<span v-if="scope.$index != 0">%</span>
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="购物车" align="center" prop="data3">
<template #default="scope">
<el-input v-if="scope.$index != 0" v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
<span v-if="scope.$index != 0">%</span>
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="订单" align="center" prop="data4">
<template #default="scope">
<el-input v-if="scope.$index != 0" v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
<span v-if="scope.$index != 0">%</span>
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError3" style="color: red">X</span>
<span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="支付" align="center" prop="data5">
<template #default="scope">
<el-input v-if="scope.$index != 0" v-model="scope.row.params4" placeholder="请输入" style="width: 100px"></el-input>
<span v-if="scope.$index != 0">%</span>
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError4" style="color: red">X</span>
<span v-if="!scope.row.isError4" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="完成交易" align="center" prop="data6">
<template #default="scope">
<el-input v-if="scope.$index != 0" v-model="scope.row.params5" placeholder="请输入" style="width: 100px"></el-input>
<span v-if="scope.$index != 0">%</span>
<div v-if="showAnswerFlag & (scope.$index != 0)" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError5" style="color: red">X</span>
<span v-if="!scope.row.isError5" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -115,49 +135,79 @@
<div id="funnel" style="width: 520px; height: 400px"></div>
<div style="margin-top: 75px">
<div>
<el-select v-model="step2Select1" placeholder="请选择" style="width: 130px; margin-bottom: 28px" @change="selectData($event, 4)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 28px">
<el-select v-model="step2Select1" placeholder="请选择" style="width: 130px" @change="selectData($event, 4)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="step2Select1 != '浏览2071'" style="color: red">X</span>
<span v-if="step2Select1 == '浏览2071'" style="color: #00bb00">√</span>
</div>
</div>
</div>
<div>
<el-select v-model="step2Select2" placeholder="请选择" style="width: 130px; margin-bottom: 32px" @change="selectData($event, 3)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 32px">
<el-select v-model="step2Select2" placeholder="请选择" style="width: 130px" @change="selectData($event, 3)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="step2Select2 != '购物车622'" style="color: red">X</span>
<span v-if="step2Select2 == '购物车622'" style="color: #00bb00">√</span>
</div>
</div>
</div>
<div>
<el-select v-model="step2Select3" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 2)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
<el-select v-model="step2Select3" placeholder="请选择" style="width: 130px" @change="selectData($event, 2)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="step2Select3 != '订单284'" style="color: red">X</span>
<span v-if="step2Select3 == '订单284'" style="color: #00bb00">√</span>
</div>
</div>
</div>
<div>
<el-select v-model="step2Select4" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 1)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
<el-select v-model="step2Select4" placeholder="请选择" style="width: 130px" @change="selectData($event, 1)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="step2Select4 != '支付235'" style="color: red">X</span>
<span v-if="step2Select4 == '支付235'" style="color: #00bb00">√</span>
</div>
</div>
</div>
<div>
<el-select v-model="step2Select5" placeholder="请选择" style="width: 130px; margin-bottom: 30px" @change="selectData($event, 0)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 30px">
<el-select v-model="step2Select5" placeholder="请选择" style="width: 130px" @change="selectData($event, 0)">
<el-option :label="'浏览2071'" :value="'浏览2071'" />
<el-option :label="'购物车622'" :value="'购物车622'" />
<el-option :label="'订单284'" :value="'订单284'" />
<el-option :label="'支付235'" :value="'支付235'" />
<el-option :label="'完成交易223'" :value="'完成交易223'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px">
<span v-if="step2Select5 != '完成交易223'" style="color: red">X</span>
<span v-if="step2Select5 == '完成交易223'" style="color: #00bb00">√</span>
</div>
</div>
</div>
</div>
<div class="submit" style="margin-top: 70px; margin-left: 100px" @click="step2Submit">提交</div>
@ -180,6 +230,10 @@
<el-option :label="'订单--支付'" :value="'订单--支付'" />
<el-option :label="'支付--完成交易'" :value="'付--完成交易'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px;display:inline-block">
<span v-if="step3Select1 != '浏览--购物车'" style="color: red">X</span>
<span v-if="step3Select1 == '浏览--购物车'" style="color: #00bb00">√</span>
</div>
</div>
<br />
<div>
@ -190,6 +244,10 @@
<el-option :label="'订单--支付'" :value="'订单--支付'" />
<el-option :label="'支付--完成交易'" :value="'付--完成交易'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px;display:inline-block">
<span v-if="step3Select2 != '购物车--订单'" style="color: red">X</span>
<span v-if="step3Select2 == '购物车--订单'" style="color: #00bb00">√</span>
</div>
</div>
<p>注:实际运用时 ,转化率需要与不同时期比较、与竞争对手、行业平均水平比较,分析的结果相对准确些。</p>
</div>
@ -609,6 +667,7 @@ const step3Error = ref(0);
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false);
const showAnswerFlag = ref(false);
const errorNum = ref(0);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
onBeforeUnmount(() => {
@ -674,48 +733,93 @@ const step1Submit = () => {
//判断对错
if (step1DataSlice[0].params1 && step1DataSlice[0].params1 !== "100") {
step1Error.value++;
step1DataSlice[0].isError1 = true;
} else {
step1DataSlice[0].isError1 = false;
}
if (step1DataSlice[0].params2 && step1DataSlice[0].params2 !== "30.0" && step1DataSlice[0].params2 !== "30") {
step1Error.value++;
step1DataSlice[0].isError2 = true;
} else {
step1DataSlice[0].isError2 = false;
}
if (step1DataSlice[0].params3 && step1DataSlice[0].params3 !== "45.7") {
step1Error.value++;
step1DataSlice[0].isError3 = true;
} else {
step1DataSlice[0].isError3 = false;
}
if (step1DataSlice[0].params4 && step1DataSlice[0].params4 !== "82.7") {
step1Error.value++;
step1DataSlice[0].isError4 = true;
} else {
step1DataSlice[0].isError4 = false;
}
if (step1DataSlice[0].params5 && step1DataSlice[0].params5 !== "94.9") {
step1Error.value++;
step1DataSlice[0].isError5 = true;
} else {
step1DataSlice[0].isError5 = false;
}
if (step1DataSlice[1].params1 && step1DataSlice[1].params1 !== "0") {
step1Error.value++;
step1DataSlice[1].isError1 = true;
} else {
step1DataSlice[1].isError1 = false;
}
if (step1DataSlice[1].params2 && step1DataSlice[1].params2 !== "70") {
step1Error.value++;
step1DataSlice[1].isError2 = true;
} else {
step1DataSlice[1].isError2 = false;
}
if (step1DataSlice[1].params3 && step1DataSlice[1].params3 !== "54.3") {
step1Error.value++;
step1DataSlice[1].isError3 = true;
} else {
step1DataSlice[1].isError3 = false;
}
if (step1DataSlice[1].params4 && step1DataSlice[1].params4 !== "17.3") {
step1Error.value++;
step1DataSlice[1].isError4 = true;
} else {
step1DataSlice[1].isError4 = false;
}
if (step1DataSlice[1].params5 && step1DataSlice[1].params5 !== "5.1") {
step1Error.value++;
step1DataSlice[1].isError5 = true;
} else {
step1DataSlice[1].isError5 = false;
}
if (step1DataSlice[2].params1 && step1DataSlice[2].params1 !== "100") {
step1Error.value++;
step1DataSlice[2].isError1 = true;
} else {
step1DataSlice[2].isError1 = false;
}
if (step1DataSlice[2].params2 && step1DataSlice[2].params2 !== "30.0" && step1DataSlice[2].params2 !== "30") {
step1Error.value++;
step1DataSlice[2].isError2 = true;
} else {
step1DataSlice[2].isError2 = false;
}
if (step1DataSlice[2].params3 && step1DataSlice[2].params3 !== "13.7") {
step1Error.value++;
step1DataSlice[2].isError3 = true;
} else {
step1DataSlice[2].isError3 = false;
}
if (step1DataSlice[2].params4 && step1DataSlice[2].params4 !== "11.3") {
step1Error.value++;
step1DataSlice[2].isError4 = true;
} else {
step1DataSlice[2].isError4 = false;
}
if (step1DataSlice[2].params5 && step1DataSlice[2].params5 !== "10.8") {
step1Error.value++;
step1DataSlice[2].isError5 = true;
} else {
step1DataSlice[2].isError5 = false;
}
console.log(step1Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -891,6 +995,7 @@ const submitData = () => {
})
.then((res) => {
proxy.$modal.msgSuccess("提交成功");
showAnswerFlag.value = true;
})
.catch((error) => {});
// console.log(666);

@ -39,9 +39,7 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<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>
<div class="line"></div>
<div class="caseBack">
@ -50,128 +48,98 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<span>第一步,获取原始数据</span>
</div>
<span style="line-height: 25px; font-size: 14px">
用户画像体系依赖于完善的用户标签体系,而用户标签体系则采用完备的数据来源--原始数据,这一层我们需要获得尽量多的原始数据,因后面的所有的应用场景都依托于原始数据的计算、分析、建模,所以在原始数据库搭建时需要考虑更全面。<br />
以电商平台为例,用到用户仓库中的表主要有:用户信息表、商品订单表、商品信息表、App端日志表、Web端日志表、商品评论表等。<br />
用户画像体系依赖于完善的用户标签体系,而用户标签体系则采用完备的数据来源--原始数据,这一层我们需要获得尽量多的原始数据,因后面的所有的应用场景都依托于原始数据的计算、分析、建模,所以在原始数据库搭建时需要考虑更全面。
<br />
以电商平台为例,用到用户仓库中的表主要有:用户信息表、商品订单表、商品信息表、App端日志表、Web端日志表、商品评论表等。
<br />
请根据字段的相关属性判断该表属于数据库中哪一个?
</span>
<div style="margin-top: 10px">
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams1"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams1" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams1 != '用户信息表'" style="color: red">X</span>
<span v-if="step1SelectParams1 == '用户信息表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable1" :key="item">
{{ item }}
</li>
</ul>
</div>
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams2"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams2" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams2 != '商品订单表'" style="color: red">X</span>
<span v-if="step1SelectParams2 == '商品订单表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable2" :key="item">
{{ item }}
</li>
</ul>
</div>
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams3"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams3" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams3 != '访问日志表'" style="color: red">X</span>
<span v-if="step1SelectParams3 == '访问日志表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable3" :key="item">
{{ item }}
</li>
</ul>
</div>
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams4"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams4" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams4 != '商品评论表'" style="color: red">X</span>
<span v-if="step1SelectParams4 == '商品评论表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable4" :key="item">
{{ item }}
</li>
</ul>
</div>
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams5"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams5" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams5 != '搜索日志表'" style="color: red">X</span>
<span v-if="step1SelectParams5 == '搜索日志表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable5" :key="item">
{{ item }}
</li>
</ul>
</div>
<div style="display: flex; margin-bottom: 20px">
<el-select
v-model="step1SelectParams6"
placeholder="请选择"
style="width: 160px"
>
<el-option
v-for="item in selectList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<div style="display: flex; margin-bottom: 20px; align-items: center">
<el-select v-model="step1SelectParams6" placeholder="请选择" style="width: 160px">
<el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="step1SelectParams6 != '销售明细表'" style="color: red">X</span>
<span v-if="step1SelectParams6 == '销售明细表'" style="color: #00bb00">√</span>
</div>
<ul class="selectUl">
<li class="selectLi" v-for="item in selectTable6" :key="item">
{{ item }}
</li>
</ul>
</div>
<div class="submit" style="margin-top: 25px" @click="step1Submit">
提交
</div>
<div class="submit" style="margin-top: 25px" @click="step1Submit">提交</div>
</div>
</div>
<div class="line"></div>
@ -181,10 +149,14 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<span>第二步,构建用户标签体系</span>
</div>
<span style="line-height: 25px; font-size: 14px">
基于原始数据的转换,文本字段的数量化表示,以及统计汇总,建立属性标签体系。按统计方式分类,可分为事实类标签、规则类标签、预测类标签:<br />
1)事实标签:从原始数据中提取,通常是基于原始数据清理后的归类,用于描述客观事实。例如用户注册信息中提取用户性别、生日、注册手机号、注册城市等。<br />
2)规则标签:没有直接对应数据,需要通过规则进行定义(可以自定义规则,或者利用常用的RFM、波士顿矩阵、漏斗模型、复购分析、AARRR模型等),通过计算来得出标签,例如流失用户、支付偏好等。<br />
3)预测标签:基于现有事实及规则无法得出,需要运用决策树算法、贝叶斯算法等进行数据挖掘与训练,得出标签预测结果,来预测用户的偏好,例如根据用户历史的购买行为来预测其群体特性。<br />
基于原始数据的转换,文本字段的数量化表示,以及统计汇总,建立属性标签体系。按统计方式分类,可分为事实类标签、规则类标签、预测类标签:
<br />
1)事实标签:从原始数据中提取,通常是基于原始数据清理后的归类,用于描述客观事实。例如用户注册信息中提取用户性别、生日、注册手机号、注册城市等。
<br />
2)规则标签:没有直接对应数据,需要通过规则进行定义(可以自定义规则,或者利用常用的RFM、波士顿矩阵、漏斗模型、复购分析、AARRR模型等),通过计算来得出标签,例如流失用户、支付偏好等。
<br />
3)预测标签:基于现有事实及规则无法得出,需要运用决策树算法、贝叶斯算法等进行数据挖掘与训练,得出标签预测结果,来预测用户的偏好,例如根据用户历史的购买行为来预测其群体特性。
<br />
不同行业,客户标签体系会有差异,以电商行业为例,常用的标签体系如下表,请对标签进行分类:
</span>
<div style="margin-top: 10px; display: flex">
@ -199,29 +171,20 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
backgroundColor: '#6A7DE9!important',
}"
>
<el-table-column label="一级标签" align="center" prop="firstTag">
</el-table-column>
<el-table-column label="二级标签" align="center" prop="secondTag">
</el-table-column>
<el-table-column
label="三级标签"
align="center"
prop="thirdTag"
width="500"
>
</el-table-column>
<el-table-column label="标签属性" align="center" prop="description">
<el-table-column label="一级标签" align="center" prop="firstTag"></el-table-column>
<el-table-column label="二级标签" align="center" prop="secondTag"></el-table-column>
<el-table-column label="三级标签" align="center" prop="thirdTag" width="500"></el-table-column>
<el-table-column label="标签属性" align="center" prop="description" width="170">
<template #default="scope">
<el-select
v-model="scope.row.params"
placeholder="请选择"
style="width: 130px"
size="small"
>
<el-select v-model="scope.row.params" placeholder="请选择" style="width: 130px" size="small">
<el-option :label="'事实标签'" :value="'事实标签'" />
<el-option :label="'规则标签'" :value="'规则标签'" />
<el-option :label="'预测标签'" :value="'预测标签'" />
</el-select>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError" style="color: red">X</span>
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -235,9 +198,7 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<img src="@/assets/images/步骤.png" alt="" />
<span>第三步,构建用户画像</span>
</div>
<span style="line-height: 25px; font-size: 14px">
基于构建的用户标签体系,经过数据的采集、预处理、挖掘、可视化,采用文本挖掘算法、分类聚类算法、相似度计算、推荐算法、机器学习算法、预测算法等,以及用户画像分析的各类常用模型(RFM模型、漏斗模型、AARRR模型等),根据不同的业务场景需求,构建相应的用户画像。
</span>
<span style="line-height: 25px; font-size: 14px">基于构建的用户标签体系,经过数据的采集、预处理、挖掘、可视化,采用文本挖掘算法、分类聚类算法、相似度计算、推荐算法、机器学习算法、预测算法等,以及用户画像分析的各类常用模型(RFM模型、漏斗模型、AARRR模型等),根据不同的业务场景需求,构建相应的用户画像。</span>
<div style="margin-top: 10px; display: flex">
<div>
<img src="@/assets/images/u6063.png" alt="" />
@ -272,18 +233,19 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<span>第四步,用户画像应用场景</span>
</div>
<span style="line-height: 25px; font-size: 14px">
1、人群分析:人群分析是用户画像最基础的应用场景之一,运营人员可借助标签深入分析不同用户画像群体的分布特征,又或是不同人群的消费习惯、消费偏好、不同地域的差异分析等。<br />
2、广告优化:用户画像可以圈选定位更准确的人群,同时也为素材文案、广告创意提供了更具体的撰写方向,做到精准且有效的投放。此外,用户画像可以助力广告主完成洞察到决策的环节,让投放工作更有目标方向,广告主也可基于标签高效触达目标人群,提升用户体验,实现营销价值的最大化。<br />
3、精细化消费者运营:运营人员可以通过快速分析用户特征,找到不同运营场景下的目标用户,从而精准圈定目标人群,进行更灵活、更有针对性的营销活动和个性化消息推送。基于用户画像分析,在合适的时间通过最佳渠道,给用户传递最感兴趣的内容。可以根据用户历史数据,实现基于用户兴趣的个性化推荐,也可在文案中植入用户个性化标签,增加用户的好感度亲密度。还可以通过用户历史购买时间,判断用户最容易消费的时间点,在合适时间给用户发送营销信息。<br />
1、人群分析:人群分析是用户画像最基础的应用场景之一,运营人员可借助标签深入分析不同用户画像群体的分布特征,又或是不同人群的消费习惯、消费偏好、不同地域的差异分析等。
<br />
2、广告优化:用户画像可以圈选定位更准确的人群,同时也为素材文案、广告创意提供了更具体的撰写方向,做到精准且有效的投放。此外,用户画像可以助力广告主完成洞察到决策的环节,让投放工作更有目标方向,广告主也可基于标签高效触达目标人群,提升用户体验,实现营销价值的最大化。
<br />
3、精细化消费者运营:运营人员可以通过快速分析用户特征,找到不同运营场景下的目标用户,从而精准圈定目标人群,进行更灵活、更有针对性的营销活动和个性化消息推送。基于用户画像分析,在合适的时间通过最佳渠道,给用户传递最感兴趣的内容。可以根据用户历史数据,实现基于用户兴趣的个性化推荐,也可在文案中植入用户个性化标签,增加用户的好感度亲密度。还可以通过用户历史购买时间,判断用户最容易消费的时间点,在合适时间给用户发送营销信息。
<br />
</span>
</div>
<div class="line"></div>
</div>
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
<template v-slot:content>
<div v-html="knowledgeHtml">
</div>
<div v-html="knowledgeHtml"></div>
</template>
</pop-modal>
</div>
@ -317,6 +279,7 @@ const step1SelectParams3 = ref("");
const step1SelectParams4 = ref("");
const step1SelectParams5 = ref("");
const step1SelectParams6 = ref("");
const showAnswerFlag = ref(false);
const selectList = ref([
{
value: "用户信息表",
@ -343,84 +306,12 @@ const selectList = ref([
label: "销售明细表",
},
]);
const selectTable1 = ref([
"用户编码",
"用户姓名",
"用户状态",
"出生日期",
"性别",
"电话号码",
"注册日期",
"归属省",
"归属市",
"学历",
"职业",
"行业",
"婚姻状况",
"子女状况",
]);
const selectTable2 = ref([
"订单号",
"订单来源标识",
"用户编码",
"用户姓名",
"商品编码",
"商品名称",
"订单生成时间",
"订单日期",
"订单备注",
"订单状态",
"订单金额",
"付款账户",
"付款方式",
]);
const selectTable3 = ref([
"设备登录名",
"用户ID",
"设备ID",
"访问时间",
"IP所在省份",
"IP所在城市",
"上一个页面URL",
"当前页面URL",
"操作系统",
"登录日期",
"经度",
"纬度",
"付款方式",
]);
const selectTable4 = ref([
"用户ID",
"用户姓名",
"评论内容",
"评论图片",
"评论状态",
"综合评分",
"订单ID",
"创建日期",
"评论用户IP",
"更新时间",
]);
const selectTable5 = ref([
"设备登录名",
"用户ID",
"设备ID",
"搜索ID",
"搜索日期",
"用户搜索的关键词",
"搜索匹配标签内容",
]);
const selectTable6 = ref([
"商品编码",
"商品名称",
"商品归属类目",
"销售额",
"销售数量",
"订单号",
"用户编码",
"用户姓名",
"销售时间",
]);
const selectTable1 = ref(["用户编码", "用户姓名", "用户状态", "出生日期", "性别", "电话号码", "注册日期", "归属省", "归属市", "学历", "职业", "行业", "婚姻状况", "子女状况"]);
const selectTable2 = ref(["订单号", "订单来源标识", "用户编码", "用户姓名", "商品编码", "商品名称", "订单生成时间", "订单日期", "订单备注", "订单状态", "订单金额", "付款账户", "付款方式"]);
const selectTable3 = ref(["设备登录名", "用户ID", "设备ID", "访问时间", "IP所在省份", "IP所在城市", "上一个页面URL", "当前页面URL", "操作系统", "登录日期", "经度", "纬度", "付款方式"]);
const selectTable4 = ref(["用户ID", "用户姓名", "评论内容", "评论图片", "评论状态", "综合评分", "订单ID", "创建日期", "评论用户IP", "更新时间"]);
const selectTable5 = ref(["设备登录名", "用户ID", "设备ID", "搜索ID", "搜索日期", "用户搜索的关键词", "搜索匹配标签内容"]);
const selectTable6 = ref(["商品编码", "商品名称", "商品归属类目", "销售额", "销售数量", "订单号", "用户编码", "用户姓名", "销售时间"]);
const knowledgeFlag = ref(false);
//时间间隔分组数-7天内
const sevenNum = ref(0);
@ -601,8 +492,7 @@ const step2Data = ref([
{
firstTag: "用户价值标签",
secondTag: "用户价值RFM等级",
thirdTag:
"1.重要价值用户;2.重要发展用户;3.重要保持用户;4.重要挽留用户;5.一般价值用户;6.一般发展用户;7.一般保持用户;8.一般挽留用户",
thirdTag: "1.重要价值用户;2.重要发展用户;3.重要保持用户;4.重要挽留用户;5.一般价值用户;6.一般发展用户;7.一般保持用户;8.一般挽留用户",
},
{
firstTag: "用户价值标签",
@ -953,22 +843,7 @@ const draw = () => {
},
xAxis: {
type: "category",
data: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
],
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
},
yAxis: {
type: "value",
@ -1035,14 +910,7 @@ const drawEcharts = () => {
};
const step1Submit = () => {
step1Error.value = 0;
if (
step1SelectParams1.value == "" ||
step1SelectParams2.value == "" ||
step1SelectParams3.value == "" ||
step1SelectParams4.value == "" ||
step1SelectParams5.value == "" ||
step1SelectParams6.value == ""
) {
if (step1SelectParams1.value == "" || step1SelectParams2.value == "" || step1SelectParams3.value == "" || step1SelectParams4.value == "" || step1SelectParams5.value == "" || step1SelectParams6.value == "") {
proxy.$modal.msgError("请先完成所有填空");
return;
}
@ -1080,18 +948,27 @@ const step2Submit = () => {
for (let i in sliceList1) {
if (sliceList1[i].params != "事实标签") {
step2Error.value++;
sliceList1[i].isError = true;
} else {
sliceList1[i].isError = false;
}
}
let sliceList2 = step2Data.value.slice(29, 34);
for (let i in sliceList2) {
if (sliceList2[i].params != "规则标签") {
step2Error.value++;
sliceList2[i].isError = true;
}else{
sliceList2[i].isError = false;
}
}
let sliceList3 = step2Data.value.slice(34);
for (let i in sliceList3) {
if (sliceList3[i].params != "预测标签") {
step2Error.value++;
sliceList3[i].isError = true;
}else{
sliceList3[i].isError = false;
}
}
console.log(step2Error.value, "错误数");
@ -1228,6 +1105,7 @@ const submitData = () => {
})
.then((res) => {
proxy.$modal.msgSuccess("提交成功");
showAnswerFlag.value = true;
})
.catch((error) => {});
};
@ -1293,9 +1171,9 @@ defineExpose({
padding: 0;
margin-left: 20px;
// background: #022603;
background: #FDEFDD;
background: #fdefdd;
// border: 1px solid #338554;
border: 1px solid #F7B55F;
border: 1px solid #f7b55f;
.selectLi {
list-style-type: none;
display: inline-block;
@ -1307,7 +1185,7 @@ defineExpose({
text-align: center;
font-size: 14px;
// border-right: 1px solid #338554;
border-right: 1px solid #F7B55F;
border-right: 1px solid #f7b55f;
}
.selectLi:nth-last-of-type(1) {
border-right: none;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -80,7 +80,7 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<div style="margin-top: 10px; display: flex">
<el-table
:data="step1Data"
style="width: 600px"
style="width: 650px"
border
:header-cell-style="{
color: '#fff',
@ -92,17 +92,29 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<el-table-column label="日活跃用户(个)" align="center" prop="addNum">
<template #default="scope">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px" size="small"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="日活跃率(%)" align="center" prop="day2">
<el-table-column label="日活跃率(%)" align="center" prop="day2" width="150">
<template #default="scope">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px" size="small"></el-input>
%
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="日活跃平均时长(分钟)" align="center" prop="day3" width="180">
<template #default="scope">
<el-input v-model="scope.row.params3" placeholder="请输入" style="width: 90px" size="small"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError3" style="color: red">X</span>
<span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -143,12 +155,20 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<el-table-column label="周活跃用户(个)" align="center" prop="description">
<template #default="scope">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="周活跃率(%)" align="center" prop="description">
<template #default="scope">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px"></el-input>
%
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -181,12 +201,20 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<el-table-column label="月活跃用户(个)" align="center" prop="description">
<template #default="scope">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError1" style="color: red">X</span>
<span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
<el-table-column label="月活跃率(%)" align="center" prop="description">
<template #default="scope">
<el-input v-model="scope.row.params2" placeholder="请输入" style="width: 90px"></el-input>
%
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError2" style="color: red">X</span>
<span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -233,6 +261,10 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<el-table-column label="活跃天数" align="center" prop="data1">
<template #default="scope">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError" style="color: red">X</span>
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -250,6 +282,10 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
<el-table-column label="数值" align="center" prop="data1">
<template #default="scope">
<el-input v-model="scope.row.params1" placeholder="请输入" style="width: 90px"></el-input>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="scope.row.isError" style="color: red">X</span>
<span v-if="!scope.row.isError" style="color: #00bb00">√</span>
</div>
</template>
</el-table-column>
</el-table>
@ -275,7 +311,7 @@ https://blog.csdn.net/kevin1993best/article/details/106329573"
在日常的项目和产品运营工作中, 单日的DAU/MAU的数值往往受到周期(工作日/周末)、版本更新和活动的影响,用户粘性在短期内的波动较大。所以通常要采用长期的均值作参考,例如一个月、两个大版本之间。eg:以某客户App为例,DAU/MAU的数值在工作日约50%,而在周末和假期的数值则在20%左右。那么谈到用户粘性的时候,通常采用每天DAU/MAU的平均值39.37%。
</span>
</div>
<div class="line"></div>
<div class="line"></div>
</div>
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
<template v-slot:content>
@ -316,6 +352,7 @@ const step2Error = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const knowledgeFlag = ref(false);
const showAnswerFlag = ref(false);
//时间间隔分组数-7天内
const sevenNum = ref(0);
//时间间隔分组数-15天内
@ -1441,12 +1478,21 @@ const step1Submit = () => {
for (let i in step1Data.value) {
if (step1Data.value[i].params1 != step1RightAnswer.value[i].activeNum) {
step1Error.value++;
step1Data.value[i].isError1 = true;
} else {
step1Data.value[i].isError1 = false;
}
if (step1Data.value[i].params2 != step1RightAnswer.value[i].activeRate) {
step1Error.value++;
step1Data.value[i].isError2 = true;
} else {
step1Data.value[i].isError2 = false;
}
if (step1Data.value[i].params3 != step1RightAnswer.value[i].activeTime) {
step1Error.value++;
step1Data.value[i].isError3 = true;
} else {
step1Data.value[i].isError3 = false;
}
}
console.log(step1Error.value, "错误数");
@ -1465,9 +1511,15 @@ const step2Submit = () => {
for (let i in step2Data.value) {
if (step2Data.value[i].params1 != step2RightAnswer.value[i].num) {
step2Error.value++;
step2Data.value[i].isError1 = true;
} else {
step2Data.value[i].isError1 = false;
}
if (step2Data.value[i].params2 != step2RightAnswer.value[i].ratio) {
step2Error.value++;
step2Data.value[i].isError2 = true;
} else {
step2Data.value[i].isError2 = false;
}
}
console.log(step2Error.value, "错误数");
@ -1485,9 +1537,15 @@ const step3Submit = () => {
}
if (step3Data.value[0].params1 != "10") {
step3Error.value++;
step3Data.value[0].isError1 = true;
}else{
step3Data.value[0].isError1 = false;
}
if (step3Data.value[0].params2 != "100") {
step3Error.value++;
step3Data.value[0].isError2 = true;
}else{
step3Data.value[0].isError2 = false;
}
// console.log(89);
console.log(step3Error.value, "错误数");
@ -1513,13 +1571,22 @@ const step4Submit = () => {
for (let i in step4Data.value) {
if (step4Data.value[i].params1 != step4RightAnswer.value[i]) {
step4Error.value++;
step4Data.value[i].isError = true;
}else{
step4Data.value[i].isError = false;
}
}
if (step4DataTable2.value[0].params1 != "20") {
step4Error.value++;
step4DataTable2.value[0].isError = true;
}else{
step4DataTable2.value[0].isError = false;
}
if (step4DataTable2.value[1].params1 != "3") {
step4Error.value++;
step4DataTable2.value[1].isError = true;
}else{
step4DataTable2.value[1].isError = false;
}
console.log(step4Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功");
@ -1682,6 +1749,7 @@ const submitData = () => {
})
.then((res) => {
proxy.$modal.msgSuccess("提交成功");
showAnswerFlag.value = true;
})
.catch((error) => {});
};

Loading…
Cancel
Save