fix/non-blocking-route-navigation
HeHaonan 2 years ago
parent e0ce12d2a5
commit 3198995fa3

@ -1235,12 +1235,13 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "AARRR用户运营分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "AARRR用户运营分析",
.then((res) => { // })
// .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
step1Params1.value = ""; step1Params1.value = "";
step1Params2.value = ""; step1Params2.value = "";
@ -1253,8 +1254,8 @@ const retrain = () => {
step4Params3.value = ""; step4Params3.value = "";
step4Params4.value = ""; step4Params4.value = "";
step5Params.value = ""; step5Params.value = "";
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1024,7 +1024,7 @@ const getData = () => {
step4Data.value[1].data3 = step3Data.value[1].params2; step4Data.value[1].data3 = step3Data.value[1].params2;
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;
step2AnswerFlag.value =true step2AnswerFlag.value = true;
step3AnswerFlag.value = true; step3AnswerFlag.value = true;
initCharts(); initCharts();
} }
@ -1164,30 +1164,35 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "帕累托/ABC分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "帕累托/ABC分析",
.then((res) => { // })
proxy.$modal.msgSuccess("重新实训成功"); // .then((res) => {
for (let i in step1Data.value) { proxy.$modal.msgSuccess("重新实训成功");
step1Data.value[i].params = ""; for (let i in step1Data.value) {
} step1Data.value[i].params = "";
for (let i in step3Data.value) { }
step3Data.value[i].params1 = ""; for (let i in step3Data.value) {
step3Data.value[i].params2 = ""; step3Data.value[i].params1 = "";
} step3Data.value[i].params2 = "";
for (let i in step4Data.value) { }
step4Data.value[i].params = ""; for (let i in step4Data.value) {
} step4Data.value[i].params = "";
// for (let i in step5Data.value) { }
// step5Data.value[i].params1 = ""; // for (let i in step5Data.value) {
// step5Data.value[i].params2 = ""; // step5Data.value[i].params1 = "";
// step5Data.value[i].params3 = ""; // step5Data.value[i].params2 = "";
// } // step5Data.value[i].params3 = "";
}) // }
.catch((error) => {}); chartParam1.value = "";
chartParam2.value = "";
chartParam3.value = "";
chartParam4.value = "";
// })
// .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1102,13 +1102,14 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
showAnswerFlag.value = false;
// console.log(66); // console.log(66);
portraitModel // portraitModel
.retrain({ // .retrain({
userId: JSON.parse(getUserInfo()).userId, // userId: JSON.parse(getUserInfo()).userId,
module: "购物篮分析", // module: "购物篮分析",
}) // })
.then((res) => { // .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
list.value = ["-"]; list.value = ["-"];
for (let i in step2Data.value) { for (let i in step2Data.value) {
@ -1129,8 +1130,8 @@ const retrain = () => {
// step2Select5.value = ""; // step2Select5.value = "";
// step3Select1.value = ""; // step3Select1.value = "";
// step3Select2.value = ""; // step3Select2.value = "";
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -194,19 +194,20 @@
<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('E', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div> <div class="pointItem" @click="drawPointStep4('y', '#009FF1')">绘制平均消费次数X:5</div>
<span>(5,1000)</span>
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block"> <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: red">X</span>
<span v-if="!centerPointError" style="color: #00bb00">√</span> <span v-if="!centerPointError" style="color: #00bb00">√</span>
</div> </div>
</div> </div>
<!-- <div class="point"> <div class="point">
<div class="pointItem" @click="drawPointStep4('Y', '#FB54A1')"> <div class="pointItem" @click="drawPointStep4('x', '#FB54A1')">绘制平均消费金额Y:1000</div>
绘制平均消费金额Y <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
<span v-if="centerPointError2" style="color: red">X</span>
<span v-if="!centerPointError2" style="color: #00bb00">√</span>
</div> </div>
<span>1000</span> </div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -363,6 +364,7 @@ const pointBError = ref(false);
const pointCError = ref(false); const pointCError = ref(false);
const pointDError = ref(false); const pointDError = ref(false);
const centerPointError = ref(false); const centerPointError = ref(false);
const centerPointError2 = ref(false);
const markArea1Error = ref(false); const markArea1Error = ref(false);
const markArea2Error = ref(false); const markArea2Error = ref(false);
const markArea3Error = ref(false); const markArea3Error = ref(false);
@ -684,6 +686,7 @@ const drawPoint = (point, color) => {
// option.value && myChart.setOption(option.value); // option.value && myChart.setOption(option.value);
}; };
const drawPointStep4 = (point, color) => { const drawPointStep4 = (point, color) => {
// markCenterLineStep4.value.splice(0, 2);
drawPointNameStep4.value = point; drawPointNameStep4.value = point;
drawPointColorStep4.value = color; drawPointColorStep4.value = color;
}; };
@ -939,7 +942,10 @@ const step4EchartInit = () => {
chart2OptionData.value.splice(i, 1); chart2OptionData.value.splice(i, 1);
} }
} }
markCenterLineStep4.value.splice(0, 2); if (markCenterLineStep4.value.length >= 2) {
markCenterLineStep4.value.splice(0, 2);
}
const pointInPixel = [param.offsetX, param.offsetY]; const pointInPixel = [param.offsetX, param.offsetY];
console.log("pointInPixel4", pointInPixel); console.log("pointInPixel4", pointInPixel);
//将偏移值转化为坐标值 //将偏移值转化为坐标值
@ -955,17 +961,31 @@ const step4EchartInit = () => {
name: drawPointNameStep4.value, name: drawPointNameStep4.value,
color: drawPointColorStep4.value, color: drawPointColorStep4.value,
}); });
markCenterLineStep4.value.push( if (drawPointNameStep4.value == "y") {
{ markCenterLineStep4.value.push(
name: "y", // {
xAxis: pointInGridStep4.value[0], // name: "y",
}, // xAxis: pointInGridStep4.value[0],
{ // },
name: "x", {
yAxis: pointInGridStep4.value[1], name: "",
} xAxis: pointInGridStep4.value[0],
); }
console.log(markCenterLineStep4.value); );
} else if (drawPointNameStep4.value == "x") {
markCenterLineStep4.value.push(
// {
// name: "y",
// xAxis: pointInGridStep4.value[0],
// },
{
name: "",
yAxis: pointInGridStep4.value[1],
}
);
}
console.log(markCenterLineStep4.value, "-----");
// console.log(markCenterLineStep4.value); // console.log(markCenterLineStep4.value);
option2.value && myChart.setOption(option2.value); option2.value && myChart.setOption(option2.value);
}); });
@ -997,18 +1017,18 @@ const step5EchartInit = () => {
// 中心线 // 中心线
const centerLine = [ const centerLine = [
{ {
name: "y", name: "",
xAxis: 5, xAxis: 5,
}, },
{ {
name: "x", name: "",
yAxis: 1000, yAxis: 1000,
}, },
]; ];
// 中心点 // 中心点
const centerMark = [ const centerMark = [
{ {
value: "中心点", value: "",
coord: [5, 1000], coord: [5, 1000],
}, },
]; ];
@ -1411,18 +1431,37 @@ const step3Submit = () => {
}; };
const step4Submit = () => { const step4Submit = () => {
step4Error.value = 0; step4Error.value = 0;
for (let i in chart2OptionData.value) { // for (let i in chart2OptionData.value) {
// console.log(option2.value.series[0].data[i]); // // console.log(option2.value.series[0].data[i]);
if (chart2OptionData.value[i].name == "E") { // if (chart2OptionData.value[i].name == "E") {
if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) { // if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) {
console.log(chart2OptionData.value[i]); // console.log(chart2OptionData.value[i]);
step4Error.value++; // step4Error.value++;
centerPointError.value = true; // centerPointError.value = true;
} else { // } else {
centerPointError.value = false; // centerPointError.value = false;
} // }
} // }
// }
// if (markCenterLineStep4.value[0].xAxis != 5 || markCenterLineStep4.value[1].yAxis != 1000) {
// step4Error.value++;
// centerPointError.value = true;
// } else {
// centerPointError.value = false;
// }
if (markCenterLineStep4.value[0].xAxis != 5) {
step4Error.value++;
centerPointError.value = true;
} else {
centerPointError.value = false;
}
if (markCenterLineStep4.value[1].yAxis != 1000) {
step4Error.value++;
centerPointError2.value = true;
} else {
centerPointError2.value = false;
} }
console.log(step4Error.value, "错误数"); console.log(step4Error.value, "错误数");
proxy.$modal.msgSuccess("提交成功"); proxy.$modal.msgSuccess("提交成功");
@ -1637,177 +1676,248 @@ const getData = () => {
quadrant2Color.value = res.data.stepNineB; quadrant2Color.value = res.data.stepNineB;
quadrant3Color.value = res.data.stepNineC; quadrant3Color.value = res.data.stepNineC;
quadrant4Color.value = res.data.stepNineD; quadrant4Color.value = res.data.stepNineD;
} // console.log(chart1OptionData.value,'666');
for (let i in chart2OptionData.value) {
// step2Data.value[14].params = res.data.stepTenA; console.log(chart2OptionData.value[i], "asdas");
// step2Data.value[15].params = res.data.stepTenB; if (chart2OptionData.value[i].name == "x") {
// step2Data.value[16].params = res.data.stepTenC; console.log(1);
// step2Data.value[17].params = res.data.stepTenD; markCenterLineStep4.value.push(
// step2Data.value[18].params = res.data.stepElevenA; // {
// step2Data.value[19].params = res.data.stepOneA; // name: "y",
// step2Data.value[20].params = res.data.stepOneB; // xAxis: pointInGridStep4.value[0],
// step2Data.value[21].params = res.data.stepOneC; // },
// step2Data.value[22].params = res.data.stepOneD; {
// step2Data.value[23].params = res.data.stepTwoA; name: "",
// step2Data.value[24].params = res.data.stepTwoB; yAxis: chart2OptionData.value[i].value[1],
// step2Data.value[25].params = res.data.stepTwoC; }
// step2Data.value[26].params = res.data.stepThreeA; );
// step2Data.value[27].params = res.data.stepThreeB; } else if (chart2OptionData.value[i].name == "y") {
// step2Data.value[28].params = res.data.stepThreeC; console.log(2);
// step2Data.value[29].params = res.data.stepThreeD; markCenterLineStep4.value.push(
// step2Data.value[30].params = res.data.stepFourA; // {
// step2Data.value[31].params = res.data.stepFourB; // name: "y",
// step2Data.value[32].params = res.data.stepFourC; // xAxis: pointInGridStep4.value[0],
// step2Data.value[33].params = res.data.stepFourD; // },
// step2Data.value[34].params = res.data.stepNewOne; {
// step2Data.value[35].params = res.data.stepNewTwo; name: "",
// step2Data.value[36].params = res.data.stepNewThree; xAxis: chart2OptionData.value[i].value[0],
// step5DataTable3.value[3].params2 = res.data.stepNewFive; }
// step5DataTable3.value[4].params1 = res.data.stepNewSix; );
// step5DataTable3.value[4].params2 = res.data.stepNewEight; }
// console.log(JSON.parse(res.data.stepSevenC));
if (res.data.subState & (res.data.subState == 1)) {
showAnswerFlag.value = true;
if (step1Data.value[0].params1 && step1Data.value[0].params1 !== "3") {
step1Data.value[0].isError1 = true;
} else {
step1Data.value[0].isError1 = false;
}
if (step1Data.value[0].params2 && step1Data.value[0].params2 !== "800") {
step1Data.value[0].isError2 = true;
} else {
step1Data.value[0].isError2 = false;
}
if (step1Data.value[1].params1 && step1Data.value[1].params1 !== "4") {
step1Data.value[1].isError1 = true;
} else {
step1Data.value[1].isError1 = false;
}
if (step1Data.value[1].params2 && step1Data.value[1].params2 !== "1200") {
step1Data.value[1].isError2 = true;
} else {
step1Data.value[1].isError2 = false;
}
if (step1Data.value[2].params1 && step1Data.value[2].params1 !== "6") {
step1Data.value[2].isError1 = true;
} else {
step1Data.value[2].isError1 = false;
}
if (step1Data.value[2].params2 && step1Data.value[2].params2 !== "600") {
step1Data.value[2].isError2 = true;
} else {
step1Data.value[2].isError2 = false;
}
if (step1Data.value[3].params1 && step1Data.value[3].params1 !== "7") {
step1Data.value[3].isError1 = true;
} else {
step1Data.value[3].isError1 = false;
}
if (step1Data.value[3].params2 && step1Data.value[3].params2 !== "1400") {
step1Data.value[3].isError2 = true;
} else {
step1Data.value[3].isError2 = false;
} }
// else {
// console.log(789);
// chart1OptionData.value = JSON.parse('[]');
// // console.log(JSON.parse(res.data.stepSevenC),'666');
// chart2OptionData.value = JSON.parse('[]');
// quadrant1.value = "";
// quadrant2.value = "";
// quadrant3.value = "";
// quadrant4.value = "";
// quadrant1Color.value = "";
// quadrant2Color.value = "";
// quadrant3Color.value = "";
// quadrant4Color.value = "";
// }
if (step2Data.value[4].params1 && step2Data.value[4].params1 !== "5") { // step2Data.value[14].params = res.data.stepTenA;
step2Data.value[4].isError1 = true; // step2Data.value[15].params = res.data.stepTenB;
} else { // step2Data.value[16].params = res.data.stepTenC;
step2Data.value[4].isError1 = false; // step2Data.value[17].params = res.data.stepTenD;
} // step2Data.value[18].params = res.data.stepElevenA;
if (step2Data.value[4].params2 && step2Data.value[4].params2 !== "1000") { // step2Data.value[19].params = res.data.stepOneA;
step2Data.value[4].isError2 = true; // step2Data.value[20].params = res.data.stepOneB;
} else { // step2Data.value[21].params = res.data.stepOneC;
step2Data.value[4].isError2 = false; // step2Data.value[22].params = res.data.stepOneD;
} // step2Data.value[23].params = res.data.stepTwoA;
// step2Data.value[24].params = res.data.stepTwoB;
// step2Data.value[25].params = res.data.stepTwoC;
// step2Data.value[26].params = res.data.stepThreeA;
// step2Data.value[27].params = res.data.stepThreeB;
// step2Data.value[28].params = res.data.stepThreeC;
// step2Data.value[29].params = res.data.stepThreeD;
// step2Data.value[30].params = res.data.stepFourA;
// step2Data.value[31].params = res.data.stepFourB;
// step2Data.value[32].params = res.data.stepFourC;
// step2Data.value[33].params = res.data.stepFourD;
// step2Data.value[34].params = res.data.stepNewOne;
// step2Data.value[35].params = res.data.stepNewTwo;
// step2Data.value[36].params = res.data.stepNewThree;
// step5DataTable3.value[3].params2 = res.data.stepNewFive;
// step5DataTable3.value[4].params1 = res.data.stepNewSix;
// step5DataTable3.value[4].params2 = res.data.stepNewEight;
// console.log(JSON.parse(res.data.stepSevenC));
for (let i in chart1OptionData.value) { step3EchartInit();
// console.log(option.value.series[0].data[i]); step4EchartInit();
if (chart1OptionData.value[i].name == "A") { step5EchartInit();
if (Math.round(chart1OptionData.value[i].value[0]) != 3 || Math.round(chart1OptionData.value[i].value[1]) != 800) { if (res.data.subState & (res.data.subState == 1)) {
pointAError.value = true; showAnswerFlag.value = true;
} else { if (step1Data.value[0].params1 && step1Data.value[0].params1 !== "3") {
pointAError.value = false; step1Data.value[0].isError1 = true;
} } else {
step1Data.value[0].isError1 = false;
} }
if (chart1OptionData.value[i].name == "B") { if (step1Data.value[0].params2 && step1Data.value[0].params2 !== "800") {
if (Math.round(chart1OptionData.value[i].value[0]) != 4 || Math.round(chart1OptionData.value[i].value[1]) != 1200) { step1Data.value[0].isError2 = true;
pointBError.value = true; } else {
} else { step1Data.value[0].isError2 = false;
pointBError.value = false;
}
} }
if (chart1OptionData.value[i].name == "C") { if (step1Data.value[1].params1 && step1Data.value[1].params1 !== "4") {
if (Math.round(chart1OptionData.value[i].value[0]) != 6 || Math.round(chart1OptionData.value[i].value[1]) != 600) { step1Data.value[1].isError1 = true;
pointCError.value = true; } else {
} else { step1Data.value[1].isError1 = false;
pointCError.value = false;
}
} }
if (chart1OptionData.value[i].name == "D") { if (step1Data.value[1].params2 && step1Data.value[1].params2 !== "1200") {
if (Math.round(chart1OptionData.value[i].value[0]) != 7 || Math.round(chart1OptionData.value[i].value[1]) != 1400) { step1Data.value[1].isError2 = true;
pointDError.value = true; } else {
} else { step1Data.value[1].isError2 = false;
pointDError.value = false; }
} if (step1Data.value[2].params1 && step1Data.value[2].params1 !== "6") {
step1Data.value[2].isError1 = true;
} else {
step1Data.value[2].isError1 = false;
}
if (step1Data.value[2].params2 && step1Data.value[2].params2 !== "600") {
step1Data.value[2].isError2 = true;
} else {
step1Data.value[2].isError2 = false;
}
if (step1Data.value[3].params1 && step1Data.value[3].params1 !== "7") {
step1Data.value[3].isError1 = true;
} else {
step1Data.value[3].isError1 = false;
}
if (step1Data.value[3].params2 && step1Data.value[3].params2 !== "1400") {
step1Data.value[3].isError2 = true;
} else {
step1Data.value[3].isError2 = false;
} }
}
for (let i in chart2OptionData.value) { if (step2Data.value[4].params1 && step2Data.value[4].params1 !== "5") {
// console.log(option2.value.series[0].data[i]); step2Data.value[4].isError1 = true;
} else {
step2Data.value[4].isError1 = false;
}
if (step2Data.value[4].params2 && step2Data.value[4].params2 !== "1000") {
step2Data.value[4].isError2 = true;
} else {
step2Data.value[4].isError2 = false;
}
if (chart2OptionData.value[i].name == "E") { for (let i in chart1OptionData.value) {
if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) { // console.log(option.value.series[0].data[i]);
centerPointError.value = true; if (chart1OptionData.value[i].name == "A") {
} else { if (Math.round(chart1OptionData.value[i].value[0]) != 3 || Math.round(chart1OptionData.value[i].value[1]) != 800) {
centerPointError.value = false; 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) {
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) {
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) {
pointDError.value = true;
} else {
pointDError.value = false;
}
} }
} }
}
if (quadrant1.value != "明星客户") { if (markCenterLineStep4.value[0].xAxis != 5) {
markArea1Error.value = true; centerPointError.value = true;
} else { } else {
markArea1Error.value = false; centerPointError.value = false;
} }
if (quadrant2.value != "问题客户") { if (markCenterLineStep4.value[1].yAxis != 1000) {
markArea2Error.value = true; centerPointError2.value = true;
} else { } else {
markArea2Error.value = false; centerPointError2.value = false;
} }
if (quadrant3.value != "瘦狗客户") { // for (let i in chart2OptionData.value) {
markArea3Error.value = true; // // console.log(option2.value.series[0].data[i]);
} else {
markArea3Error.value = false; // if (chart2OptionData.value[i].name == "E") {
} // if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) {
if (quadrant4.value != "现金流客户") { // centerPointError.value = true;
markArea4Error.value = true; // } else {
} else { // centerPointError.value = false;
markArea4Error.value = false; // }
// }
// }
if (quadrant1.value != "明星客户") {
markArea1Error.value = true;
} else {
markArea1Error.value = false;
}
if (quadrant2.value != "问题客户") {
markArea2Error.value = true;
} else {
markArea2Error.value = false;
}
if (quadrant3.value != "瘦狗客户") {
markArea3Error.value = true;
} else {
markArea3Error.value = false;
}
if (quadrant4.value != "现金流客户") {
markArea4Error.value = true;
} else {
markArea4Error.value = false;
}
} }
} }
step3EchartInit();
step4EchartInit();
step5EchartInit();
}) })
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
showAnswerFlag.value = false;
// console.log(666); // console.log(666);
portraitModel // portraitModel
.retrain({ // .retrain({
userId: JSON.parse(getUserInfo()).userId, // userId: JSON.parse(getUserInfo()).userId,
module: "波士顿矩阵分析", // module: "波士顿矩阵分析",
}) // })
.then((res) => { // .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
for (let i in step1Data.value) { for (let i in step1Data.value) {
step1Data.value[i].params1 = ""; step1Data.value[i].params1 = "";
step1Data.value[i].params2 = ""; step1Data.value[i].params2 = "";
} }
step2Data.value[4].params1 = ""; step2Data.value[4].params1 = "";
step2Data.value[4].params2 = ""; step2Data.value[4].params2 = "";
}) chart1OptionData.value = JSON.parse("[]");
.catch((error) => {}); // console.log(JSON.parse(res.data.stepSevenC),'666');
chart2OptionData.value = JSON.parse("[]");
markCenterLineStep4.value.splice(0, 2);
quadrant1.value = "";
quadrant2.value = "";
quadrant3.value = "";
quadrant4.value = "";
quadrant1Color.value = "";
quadrant2Color.value = "";
quadrant3Color.value = "";
quadrant4Color.value = "";
// })
// .catch((error) => {});
step3EchartInit();
step4EchartInit();
step5EchartInit();
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -314,7 +314,9 @@ import * as echarts from "echarts";
import { downBlobFile } from "@/utils/index.js"; import { downBlobFile } from "@/utils/index.js";
import { onMounted } from "vue"; import { onMounted } from "vue";
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const funnelData = ref([223, 235, 284, 622, 2071]); // const funnelData = ref([223, 235, 284, 622, 2071]);
const funnelData = ref(["", "", "", "", ""]);
const funnelYAxis = ref(["", "", "", "", ""]);
const dialogVisible = ref(false); const dialogVisible = ref(false);
const step2Select1 = ref(""); const step2Select1 = ref("");
const step2Select2 = ref(""); const step2Select2 = ref("");
@ -586,81 +588,7 @@ const typeData = ref([
// }, // },
// ], // ],
// }; // };
const option = ref({
title: {
text: "漏斗图",
textStyle: {
color: "#fff",
},
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
},
legend: {
data: [],
textStyle: {
color: "#fff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
show: false,
// type: 'value',
// boundaryGap: [0, 0.01]
},
yAxis: {
type: "category",
data: ["", "", "", "", ""],
position: "center",
},
series: [
{
name: "",
stack: "one",
type: "bar",
barWidth: "60%",
data: [1120, 1113, 1090, 920, 220],
itemStyle: {
normal: {
//这里是重点
color: function (params) {
// 颜色设置透明
var colorList = ["rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)"];
return colorList[params.dataIndex];
},
},
},
},
{
stack: "one",
name: "",
type: "bar",
barWidth: "60%",
data: funnelData.value,
// data: [223, 235, 284, 622, 2071],
itemStyle: {
normal: {
//这里是重点
color: function (params) {
// 颜色设置透明
var colorList = ["#009FF1", "#003DA3", "#00B869", "#FE8D2A", "#FB54A1"];
return colorList[params.dataIndex];
},
},
borderColor: "#fff",
borderWidth: 1,
},
},
],
});
const step1Error = ref(0); const step1Error = ref(0);
const step2Error = ref(0); const step2Error = ref(0);
const step3Error = ref(0); const step3Error = ref(0);
@ -669,36 +597,126 @@ const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false); const step3AnswerFlag = ref(false);
const showAnswerFlag = ref(false); const showAnswerFlag = ref(false);
const errorNum = ref(0); const errorNum = ref(0);
const option = ref({});
const baseUrl = import.meta.env.VITE_APP_BASE_API; const baseUrl = import.meta.env.VITE_APP_BASE_API;
onBeforeUnmount(() => { onBeforeUnmount(() => {
saveData(); saveData();
}); });
onMounted(() => { onMounted(() => {
getData(); getData();
initEchart()
});
const initEchart = () => {
option.value = {
title: {
text: "漏斗图",
textStyle: {
color: "#fff",
},
},
tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow'
// }
},
legend: {
data: [],
textStyle: {
color: "#fff",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
show: false,
// type: 'value',
// boundaryGap: [0, 0.01]
},
yAxis: {
type: "category",
// data: ["1", "2", "3", "4", "5"],
data: funnelYAxis.value,
position: "center",
},
series: [
{
name: "",
stack: "one",
type: "bar",
barWidth: "60%",
data: [1120, 1113, 1090, 920, 220],
itemStyle: {
normal: {
//这里是重点
color: function (params) {
// 颜色设置透明
var colorList = ["rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)", "rgba(0,0,0,0)"];
return colorList[params.dataIndex];
},
},
},
},
{
label: {
show: true, // 显示数值
// position: 'top' // 在柱状图上方显示
},
stack: "one",
name: "",
type: "bar",
barWidth: "60%",
data: funnelData.value,
// data: [223, 235, 284, 622, 2071],
itemStyle: {
normal: {
//这里是重点
color: function (params) {
// 颜色设置透明
var colorList = ["#009FF1", "#003DA3", "#00B869", "#FE8D2A", "#FB54A1"];
return colorList[params.dataIndex];
},
},
borderColor: "#fff",
borderWidth: 1,
},
},
],
};
var chartDom = document.getElementById("funnel"); var chartDom = document.getElementById("funnel");
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
option.value && myChart.setOption(option.value); option.value && myChart.setOption(option.value);
}); };
const selectData = (item, index) => { const selectData = (item, index) => {
console.log(item, index); console.log(item, index);
if (item == "浏览2071") { if (item == "浏览2071") {
funnelData.value[index] = 2071; funnelData.value[index] = 2071;
funnelYAxis.value[index] = "浏览";
} }
if (item == "购物车622") { if (item == "购物车622") {
funnelData.value[index] = 622; funnelData.value[index] = 622;
funnelYAxis.value[index] = "购物车";
} }
if (item == "订单284") { if (item == "订单284") {
funnelData.value[index] = 284; funnelData.value[index] = 284;
funnelYAxis.value[index] = "订单";
} }
if (item == "支付235") { if (item == "支付235") {
funnelData.value[index] = 235; funnelData.value[index] = 235;
funnelYAxis.value[index] = "支付";
} }
if (item == "完成交易223") { if (item == "完成交易223") {
funnelData.value[index] = 223; funnelData.value[index] = 223;
funnelYAxis.value[index] = "完成交易";
} }
var chartDom = document.getElementById("funnel"); // var chartDom = document.getElementById("funnel");
var myChart = echarts.init(chartDom); // var myChart = echarts.init(chartDom);
option.value && myChart.setOption(option.value); // option.value && myChart.setOption(option.value);
initEchart();
}; };
const moveUp = (index, row) => { const moveUp = (index, row) => {
console.log("上移", index, row); console.log("上移", index, row);
@ -902,11 +920,11 @@ const saveData = () => {
stepNineD: step2Select5.value, stepNineD: step2Select5.value,
stepTenA: step3Select1.value, stepTenA: step3Select1.value,
stepTenB: step3Select2.value, stepTenB: step3Select2.value,
// stepTenC: step4Data.value[2].params1, stepTenC: funnelData.value[0],
// stepTenD: step4Data.value[2].params2, stepTenD: funnelData.value[1],
// stepElevenA: step4Data.value[2].params3, stepElevenA: funnelData.value[2],
// stepOneA: step5Data.value[0].params1, stepOneA: funnelData.value[3],
// stepOneB: step5Data.value[0].params2, stepOneB: funnelData.value[4],
// stepOneC: step5Data.value[0].params3, // stepOneC: step5Data.value[0].params3,
// stepOneD: step6Data.value[0].params1, // stepOneD: step6Data.value[0].params1,
// stepTwoA: step6Data.value[0].params2, // stepTwoA: step6Data.value[0].params2,
@ -959,11 +977,25 @@ const getData = () => {
step2Select5.value = res.data.stepNineD; step2Select5.value = res.data.stepNineD;
step3Select1.value = res.data.stepTenA; step3Select1.value = res.data.stepTenA;
step3Select2.value = res.data.stepTenB; step3Select2.value = res.data.stepTenB;
// step4Data.value[2].params1 = res.data.stepTenC;
// step4Data.value[2].params2 = res.data.stepTenD; funnelYAxis.value[4] = step2Select1.value;
// step4Data.value[2].params3 = res.data.stepElevenA;
// step5Data.value[0].params1 = res.data.stepOneA; funnelYAxis.value[3] = step2Select2.value;
// step5Data.value[0].params2 = res.data.stepOneB;
funnelYAxis.value[2] = step2Select3.value;
funnelYAxis.value[1] = step2Select4.value;
funnelYAxis.value[0] = step2Select5.value;
funnelData.value[0] = res.data.stepTenC;
funnelData.value[1] = res.data.stepTenD;
funnelData.value[2] = res.data.stepElevenA;
funnelData.value[3] = res.data.stepOneA;
funnelData.value[4] = res.data.stepOneB;
// var chartDom = document.getElementById("funnel");
// var myChart = echarts.init(chartDom);
// option.value && myChart.setOption(option.value);
initEchart();
// step5Data.value[0].params3 = res.data.stepOneC; // step5Data.value[0].params3 = res.data.stepOneC;
// step6Data.value[0].params1 = res.data.stepOneD; // step6Data.value[0].params1 = res.data.stepOneD;
// step6Data.value[0].params2 = res.data.stepTwoA; // step6Data.value[0].params2 = res.data.stepTwoA;
@ -1137,29 +1169,36 @@ const saveDataSubmit = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "转化分析-漏斗模型", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "转化分析-漏斗模型",
.then((res) => { // })
proxy.$modal.msgSuccess("重新实训成功"); // .then((res) => {
for (let i in step1Data.value) { proxy.$modal.msgSuccess("重新实训成功");
step1Data.value[i].params1 = ""; for (let i in step1Data.value) {
step1Data.value[i].params2 = ""; step1Data.value[i].params1 = "";
step1Data.value[i].params3 = ""; step1Data.value[i].params2 = "";
step1Data.value[i].params4 = ""; step1Data.value[i].params3 = "";
step1Data.value[i].params5 = ""; step1Data.value[i].params4 = "";
} step1Data.value[i].params5 = "";
step2Select1.value = ""; }
step2Select2.value = ""; step2Select1.value = "";
step2Select3.value = ""; step2Select2.value = "";
step2Select4.value = ""; step2Select3.value = "";
step2Select5.value = ""; step2Select4.value = "";
step3Select1.value = ""; step2Select5.value = "";
step3Select2.value = ""; step3Select1.value = "";
}) step3Select2.value = "";
.catch((error) => {}); funnelData.value = ["", "", "", "", ""];
funnelYAxis.value = ["", "", "", "", ""];
// var chartDom = document.getElementById("funnel");
// var myChart = echarts.init(chartDom);
// option.value && myChart.setOption(option.value);
initEchart();
// })
// .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1200,13 +1200,14 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
showAnswerFlag.value = false;
// console.log(66666); // console.log(66666);
portraitModel // portraitModel
.retrain({ // .retrain({
userId: JSON.parse(getUserInfo()).userId, // userId: JSON.parse(getUserInfo()).userId,
module: "用户画像分析", // module: "用户画像分析",
}) // })
.then((res) => { // .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
step1SelectParams1.value = ""; step1SelectParams1.value = "";
step1SelectParams2.value = ""; step1SelectParams2.value = "";
@ -1217,8 +1218,8 @@ const retrain = () => {
for (let i in step2Data.value) { for (let i in step2Data.value) {
step2Data.value[i].params = ""; step2Data.value[i].params = "";
} }
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -2201,12 +2201,13 @@ const submitData = () => {
// console.log(666); // console.log(666);
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "复购分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "复购分析",
.then((res) => { // })
// .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
for (let i in step1Data.value) { for (let i in step1Data.value) {
step1Data.value[i].params = ""; step1Data.value[i].params = "";
@ -2227,8 +2228,8 @@ const retrain = () => {
step5DataTable3.value[i].params1 = ""; step5DataTable3.value[i].params1 = "";
step5DataTable3.value[i].params2 = ""; step5DataTable3.value[i].params2 = "";
} }
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1727,12 +1727,13 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "留存分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "留存分析",
.then((res) => { // })
// .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
for (let i in step1Data.value.slice(0, step1Data.value.length - 1)) { for (let i in step1Data.value.slice(0, step1Data.value.length - 1)) {
@ -1745,8 +1746,8 @@ const retrain = () => {
step2Data.value[i].params4 = ""; step2Data.value[i].params4 = "";
} }
dayValue.value = ""; dayValue.value = "";
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1233,7 +1233,7 @@ const saveDataSubmit = () => {
}) })
.then((res) => {}) .then((res) => {})
.catch((error) => {}); .catch((error) => {});
} };
const getData = () => { const getData = () => {
portraitModel portraitModel
.getData({ .getData({
@ -1458,39 +1458,40 @@ const getData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "RFM分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "RFM分析",
.then((res) => { // })
proxy.$modal.msgSuccess("重新实训成功"); // .then((res) => {
for (let i in fileTable1.value) { proxy.$modal.msgSuccess("重新实训成功");
fileTable1.value[i].params = ""; for (let i in fileTable1.value) {
} fileTable1.value[i].params = "";
for (let i in step2Data.value) { }
step2Data.value[i].params1 = ""; for (let i in step2Data.value) {
step2Data.value[i].params2 = ""; step2Data.value[i].params1 = "";
step2Data.value[i].params3 = ""; step2Data.value[i].params2 = "";
} step2Data.value[i].params3 = "";
for (let i in step4Data.value) { }
step4Data.value[i].params1 = ""; for (let i in step4Data.value) {
step4Data.value[i].params2 = ""; step4Data.value[i].params1 = "";
step4Data.value[i].params3 = ""; step4Data.value[i].params2 = "";
} step4Data.value[i].params3 = "";
step5Data.value[0].params1 = ""; }
step5Data.value[0].params2 = ""; step5Data.value[0].params1 = "";
step5Data.value[0].params3 = ""; step5Data.value[0].params2 = "";
for (let i in step6Data.value) { step5Data.value[0].params3 = "";
step6Data.value[i].params1 = ""; for (let i in step6Data.value) {
step6Data.value[i].params2 = ""; step6Data.value[i].params1 = "";
step6Data.value[i].params3 = ""; step6Data.value[i].params2 = "";
} step6Data.value[i].params3 = "";
for (let i in step7Data.value) { }
step7Data.value[i].params = ""; for (let i in step7Data.value) {
} step7Data.value[i].params = "";
}) }
.catch((error) => {}); // })
// .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

@ -1888,12 +1888,13 @@ const submitData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const retrain = () => { const retrain = () => {
portraitModel showAnswerFlag.value = false;
.retrain({ // portraitModel
userId: JSON.parse(getUserInfo()).userId, // .retrain({
module: "用户粘性分析", // userId: JSON.parse(getUserInfo()).userId,
}) // module: "用户粘性分析",
.then((res) => { // })
// .then((res) => {
proxy.$modal.msgSuccess("重新实训成功"); proxy.$modal.msgSuccess("重新实训成功");
for (let i in step1Data.value) { for (let i in step1Data.value) {
@ -1920,8 +1921,8 @@ const retrain = () => {
analysisConclusionStep3.value = ""; analysisConclusionStep3.value = "";
analysisConclusionStep4.value = ""; analysisConclusionStep4.value = "";
// dayValue.value = ""; // dayValue.value = "";
}) // })
.catch((error) => {}); // .catch((error) => {});
}; };
defineExpose({ defineExpose({
submitData, submitData,

Loading…
Cancel
Save