chenyuan1
/
dianshang-qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ai数据分析、样式调整

Browse Source
dev-QQq
HeHaonan 2 years ago
parent 1cd153b948
commit 87728bc6af
18 changed files with 770 additions and 856 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/aiAnalysis1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 143 KiB

BIN
src/assets/images/aiAnalysis2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 631 KiB

2
src/utils/request.js
Unescape Escape View File

@ -17,7 +17,7 @@ const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分 // axios中请求配置有baseURL选项，表示请求URL公共部分
// baseURL: import.meta.env.VITE_APP_BASE_API, // baseURL: import.meta.env.VITE_APP_BASE_API,
baseURL:'http://118.31.7.2:9868/', baseURL:'http://118.31.7.2:9868/',
// baseURL:'http://192.168.2.16:9868/', // baseURL:'http://192.168.2.14:9868/',
// 超时 // 超时
timeout: 100000 timeout: 100000
}) })

291
src/views/digitalMarketTech/AIGCLargeModel/components/AIDataAnalysis.vue
Unescape Escape View File

@ -0,0 +1,291 @@
<template>
<div class="app-containere">
<div class="material">
<div class="title">
<img src="@/assets/images/caseIcon.png" alt="" />
<span>任务素材</span>
</div>
<div style="font-size: 15px; line-height: 30px; margin-top: 10px; margin-bottom: 10px">
<div style="display: flex; align-items: center">
<span>根据提供的Excel表格（“customer_shopping_data.csv”），利用AI数据分析工具，通过自然语言的对话式交互，对信息进行分析。</span>
<div class="download" @click="downloadData('AI数据分析')">Excel下载</div>
</div>
1、对数据进行描述性统计分析，以表格形式展现。
<br />
2、按照性别（男、女），分别统计销售额产品排名，查看不同性别的购物偏好，以条形图进行展现。
<br />
3、按照发票日期，以每个月为统计单位，使用折线图展示销售额变化趋势。
</div>
</div>
<div class="material">
<div class="title">
<img src="@/assets/images/步骤.png" alt="" />
<span>任务提交</span>
<span style="font-size: 13px">(请按照任务素材顺序依次提交)</span>
</div>
<div style="margin-top: 10px; width: 200px">
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile1" :auto-upload="false" :on-change="handleChange1" :show-file-list="true" :limit="1">
<el-button type="primary" class="uploadBtn">+任务提交1</el-button>
</el-upload>
</div>
<div style="margin-top: 10px; width: 200px">
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile2" :auto-upload="false" :on-change="handleChange2" :show-file-list="true" :limit="1">
<el-button type="primary" class="uploadBtn">+任务提交2</el-button>
</el-upload>
</div>
<div style="margin-top: 10px; width: 200px">
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile3" :auto-upload="false" :on-change="handleChange3" :show-file-list="true" :limit="1">
<el-button type="primary" class="uploadBtn">+任务提交3</el-button>
</el-upload>
</div>
</div>
<div class="material" style="margin-top: 20px">
<div class="title">
<img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
<span>大模型参考工具</span>
</div>
<div style="display: flex">
<div class="case">
<div class="bgItem">
<img src="@/assets/images/aiAnalysis1.png" alt="" />
</div>
<div class="detail">
<div class="title">办公小浣能</div>
<el-tooltip
popper-class="tooltip"
effect="light"
content="办公小浣能是由商汤科技基于其`日日新SenseNov4.0`大模型能力推出的一款新型A1数据分析工具，旨在简化数据分析过程，无需编程或复杂操作即可使用。用户可以通过自然语言输入来描述他们的数据分析需求，办公小浣能能够理解并执行这些需求，自动将数据转化为有意义的分析结果和可视化图表。
"
placement="top-start"
>
<div style="line-height: 24px; font-size: 13px">办公小浣能是由商汤科技基于其`日日新SenseNov4.0`大模型能力推出的一款新型A1数据分析工具，旨在简化数据分析过程，无需编程或复杂操作即可使用。用户可以通过自然语言输入来描述他们的数据分析需求...</div>
</el-tooltip>
<a class="btn" href="https://raccoon.sensetime.com/" target="_blank">
<span>访问官网</span>
</a>
</div>
</div>
<div class="case">
<div class="bgItem">
<img src="@/assets/images/aiAnalysis2.png" alt="" />
</div>
<div class="detail">
<div class="title">百度GBl</div>
<el-tooltip popper-class="tooltip" effect="light" content="百度GBl(Global Business inteligence)是百度推出的全球商业智能平台，它结合了大模型技术，通过自然语言的对话式交互，执行数据查询与分析任务，实现“任意表，随便问”，为企业客户建立“对话即洞察”的数据分析新范式。适用于数据分析师、业务经理、市场研究人员、销售代表、产品经理、财务人员和运营专员等多种角色。" placement="top-start">
<div style="line-height: 24px; font-size: 13px">百度GBl(Global Business inteligence)是百度推出的全球商业智能平台，它结合了大模型技术，通过自然语言的对话式交互，执行数据查询与分析任务，实现“任意表，随便问”，为企业客户建立“对话即洞察”的数据分析...</div>
</el-tooltip>
<a class="btn" href="https://gbi.cloud.baidu.com/" target="_blank">
<span>访问官网</span>
</a>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo, getToken } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import { uploadFile } from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const previewFile1 = ref([]);
const previewFile2 = ref([]);
const previewFile3 = ref([]);
const fileList1 = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
const handleChange1 = async (info) => {
fileList1.value = [];
fileList1.value.push(info);
let formData = new FormData();
formData.append("file", fileList1.value[0].raw);
formData.append("userId", JSON.parse(getUserInfo()).userId);
formData.append("module", "AI数据分析");
formData.append("count", 1);
try {
previewFile1.value = [];
const res = await uploadFile(formData);
// registerParams.value.imgAddress = res.data;
proxy.$modal.msgSuccess("上传成功！");
previewFile1.value.push({
name: fileList1.value[0].raw.name,
});
// getMessage();
} catch (e) {
// console.log(e);
}
};
const handleChange2 = async (info) => {
fileList2.value = [];
fileList2.value.push(info);
let formData = new FormData();
formData.append("file", fileList2.value[0].raw);
formData.append("userId", JSON.parse(getUserInfo()).userId);
formData.append("module", "AI数据分析");
formData.append("count", 2);
try {
previewFile2.value = [];
const res = await uploadFile(formData);
// registerParams.value.imgAddress = res.data;
proxy.$modal.msgSuccess("上传成功！");
previewFile2.value.push({
name: fileList2.value[0].raw.name,
});
// getMessage();
} catch (e) {
// console.log(e);
}
};
const handleChange3 = async (info) => {
fileList3.value = [];
fileList3.value.push(info);
let formData = new FormData();
formData.append("file", fileList3.value[0].raw);
formData.append("userId", JSON.parse(getUserInfo()).userId);
formData.append("module", "AI数据分析");
formData.append("count", 3);
try {
previewFile3.value = [];
const res = await uploadFile(formData);
// registerParams.value.imgAddress = res.data;
proxy.$modal.msgSuccess("上传成功！");
previewFile3.value.push({
name: fileList3.value[0].raw.name,
});
// getMessage();
} catch (e) {
// console.log(e);
}
};
const downloadData = (name) => {
window.open(baseUrl + "/api/bigModule/download?name=" + name + "&TOKEN=Bearer " + getToken());
};
</script>
<style lang="scss" scoped>
.app-containere {
margin: 10px 4px 10px 10px;
border: 1px solid #0452c6;
// background-color: rgba(0, 0, 0, 0.5);
background: rgba(0, 29, 64, 0.5);
padding: 25px;
color: #fff;
.material {
.title {
display: flex;
align-items: center;
font-size: 18px;
span {
margin-left: 10px;
}
}
p {
font-size: 15px;
line-height: 30px;
}
.download {
cursor: pointer;
margin-left: 20px;
color: #000;
padding-left: 14px;
font-size: 14px;
text-align: center;
line-height: 30px;
width: 96px;
height: 30px;
background: url("@/assets/images/downloadIcon.png");
background-size: 96px 30px;
}
.case {
margin-right: 18px;
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
margin-top: 10px;
// width: calc(100% - 100px);
width: 500px;
// background: #fff;
// background: #002c5b;
background: #011031;
border-radius: 10px;
border: 1px solid #003e7c;
display: flex;
align-items: center;
.bgItem {
display: flex;
align-items: center;
justify-content: center;
img {
// 186px
width: 258px;
height: 134px;
border-radius: 5px;
scale: 0.8;
}
// background-color: #e6e8ed;
background-color: #002c5b;
width: 240px;
height: 170px;
// padding: 20px;
border-radius: 10px;
box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
}
.detail {
width: 300px;
margin-left: 20px;
.icon {
display: flex;
align-items: center;
span {
color: #f1404b;
}
.iconItem {
background-color: #f1404b;
color: #fff;
font-size: 12px;
padding: 2px;
border-radius: 4px;
padding-left: 4px;
padding-right: 4px;
}
}
.title {
font-size: 20px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
// font-weight: bold;
}
.btn {
display: block;
background-color: #e7e6e8;
color: #333;
width: 90px;
height: 30px;
text-align: center;
line-height: 30px;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
}
.btn:hover {
background-color: #409eff;
color: #fff;
}
}
}
}
}
</style>
<style>
.tooltip {
max-width: 260px;
}
</style>

57
src/views/digitalMarketTech/AIGCLargeModel/components/AIPicture.vue
Unescape Escape View File

@ -5,16 +5,20 @@
<img src="@/assets/images/caseIcon.png" alt="" /> <img src="@/assets/images/caseIcon.png" alt="" />
<span>任务素材</span> <span>任务素材</span>
</div> </div>
<div> <div style="font-size: 15px; line-height: 30px; margin-top: 10px; margin-bottom: 10px">
<p> 根据文字描述要求，利用推荐的AI工具，进行图片修复美化。
根据文字描述要求，利用推荐的AI工具，进行图片修复美化。 <div class="remand">
<br /> <span>1、AI消除：去除图片中的水印和文字，只保留鞋子。</span>
1、AI消除：去除图片中的水印和文字，只保留鞋子。 <div class="download" @click="downloadData('AI消除')">素材1</div>
<br /> </div>
2、AI抠图：将人物照中的背景去除，抠出人物。 <div class="remand">
<br /> <span>2、AI抠图：将人物照中的背景去除，抠出人物。</span>
3、AI扩图：将金鱼图片进行尺寸扩展，或者周边扩展。 <div class="download" @click="downloadData('AI抠图')">素材2</div>
</p> </div>
<div class="remand">
<span>3、AI扩图：将金鱼图片进行尺寸扩展，或者周边扩展。</span>
<div class="download" @click="downloadData('AI扩图')">素材3</div>
</div>
</div> </div>
</div> </div>
<div class="material"> <div class="material">
@ -105,7 +109,7 @@
</template> </template>
<script setup> <script setup>
import popModal from "@/views/components/popModal.vue"; import popModal from "@/views/components/popModal.vue";
import { getUserInfo } from "@/utils/auth"; import { getUserInfo, getToken } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel"; import * as portraitModel from "@/api/portraitModel";
import { uploadFile } from "@/api/portraitModel"; import { uploadFile } from "@/api/portraitModel";
import { downBlobFile } from "@/utils/index.js"; import { downBlobFile } from "@/utils/index.js";
@ -182,6 +186,9 @@ const handleChange3 = async (info) => {
// console.log(e); // console.log(e);
} }
}; };
const downloadData = (name) => {
window.open(baseUrl + "/api/bigModule/download?name=" + name + "&TOKEN=Bearer " + getToken());
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -205,6 +212,25 @@ const handleChange3 = async (info) => {
font-size: 15px; font-size: 15px;
line-height: 30px; line-height: 30px;
} }
.download {
cursor: pointer;
margin-left: 20px;
color: #000;
padding-left: 10px;
font-size: 14px;
text-align: center;
line-height: 26px;
width: 76px;
height: 26px;
background: url("@/assets/images/downloadIcon.png");
background-size: 76px 26px;
}
.remand {
display: flex;
align-items: center;
width: 470px;
justify-content: space-between;
}
.case { .case {
margin-right: 18px; margin-right: 18px;
padding: 10px; padding: 10px;
@ -261,7 +287,8 @@ const handleChange3 = async (info) => {
} }
} }
.title { .title {
font-size: 26px; font-size: 20px;
font-weight: bold;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
// font-weight: bold; // font-weight: bold;
@ -270,10 +297,10 @@ const handleChange3 = async (info) => {
display: block; display: block;
background-color: #e7e6e8; background-color: #e7e6e8;
color: #333; color: #333;
width: 110px; width: 90px;
height: 40px; height: 30px;
text-align: center; text-align: center;
line-height: 40px; line-height: 30px;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;

9
src/views/digitalMarketTech/AIGCLargeModel/components/AIVideo.vue
Unescape Escape View File

@ -253,7 +253,8 @@ const handleChange3 = async (info) => {
} }
} }
.title { .title {
font-size: 26px; font-size: 20px;
font-weight: bold;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
// font-weight: bold; // font-weight: bold;
@ -262,10 +263,10 @@ const handleChange3 = async (info) => {
display: block; display: block;
background-color: #e7e6e8; background-color: #e7e6e8;
color: #333; color: #333;
width: 110px; width: 90px;
height: 40px; height: 30px;
text-align: center; text-align: center;
line-height: 40px; line-height: 30px;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;

9
src/views/digitalMarketTech/AIGCLargeModel/components/AIWriting.vue
Unescape Escape View File

@ -253,7 +253,8 @@ const handleChange3 = async (info) => {
} }
} }
.title { .title {
font-size: 26px; font-size: 20px;
font-weight: bold;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
// font-weight: bold; // font-weight: bold;
@ -262,10 +263,10 @@ const handleChange3 = async (info) => {
display: block; display: block;
background-color: #e7e6e8; background-color: #e7e6e8;
color: #333; color: #333;
width: 110px; width: 90px;
height: 40px; height: 30px;
text-align: center; text-align: center;
line-height: 40px; line-height: 30px;
border-radius: 5px; border-radius: 5px;
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;

14
src/views/digitalMarketTech/AIGCLargeModel/index.vue
Unescape Escape View File

@ -13,7 +13,7 @@
<component v-if="page" :is="page"></component> <component v-if="page" :is="page"></component>
</template> </template>
<script setup> <script setup>
const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))]; const pageData = [defineAsyncComponent(() => import("./components/AIVenisonDiagram.vue")), defineAsyncComponent(() => import("./components/AIPicture.vue")), defineAsyncComponent(() => import("./components/AIVideo.vue")), defineAsyncComponent(() => import("./components/AIWriting.vue")), defineAsyncComponent(() => import("./components/AIDataAnalysis.vue")), defineAsyncComponent(() => import("./components/thirdPartyAIGC.vue"))];
const page = ref(pageData[0]); const page = ref(pageData[0]);
const clickIndx = (index) => { const clickIndx = (index) => {
page.value = pageData[index]; page.value = pageData[index];
@ -23,10 +23,6 @@ const imgData = [
text: "AI文生图", text: "AI文生图",
img: "wst", img: "wst",
}, },
{
text: "AI写作",
img: "wz",
},
{ {
text: "AI修图", text: "AI修图",
img: "xt", img: "xt",
@ -35,6 +31,14 @@ const imgData = [
text: "AI视频", text: "AI视频",
img: "sp", img: "sp",
}, },
{
text: "AI写作",
img: "wz",
},
{
text: "AI数据分析",
img: "bt",
},
{ {
text: "第三方AIGC大模型", text: "第三方AIGC大模型",
img: "dmx", img: "dmx",

304
src/views/portraitModel/components/AARRRAnalysis.vue
Unescape Escape View File

@ -43,9 +43,7 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
某买菜app想通过 AARRR模型分析自己的增长优势和弱势，获取更大的市场。 某买菜app想通过 AARRR模型分析自己的增长优势和弱势，获取更大的市场。
<br /> <br />
AARRR模型的实质是一个用户生命周期模型，关注用户获取(Acquisition) AARRR模型的实质是一个用户生命周期模型，关注用户获取(Acquisition) 、激活(Activation)、留存(Retention) 、收入(Revenue) 和自传播(Refer) 这五个方面，描述了用户从了解一个产品或服务到成为忠实用户的整个过程，对应于产品生命周期中的五个阶段。
、激活(Activation)、留存(Retention) 、收入(Revenue) 和自传播(Refer)
这五个方面，描述了用户从了解一个产品或服务到成为忠实用户的整个过程，对应于产品生命周期中的五个阶段。
</span> </span>
</div> </div>
<div class="line"></div> <div class="line"></div>
@ -54,18 +52,10 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第一步，获客分析</span> <span>第一步，获客分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">任何产品的运营，第一步都是获取新用户，新用户一般来源于不同的渠道，因此我们首先需要做的就是渠道分析。做了渠道分析，我们才能知道，哪个渠道效果好，花费少，以后可以在性价比高的渠道投放。通常情况下渠道分析有两个维度：获客数量和获客质量</span>
任何产品的运营，第一步都是获取新用户，新用户一般来源于不同的渠道，因此我们首先需要做的就是渠道分析。做了渠道分析，我们才能知道，哪个渠道效果好，花费少，以后可以在性价比高的渠道投放。通常情况下渠道分析有两个维度：获客数量和获客质量
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div> <div>
<div <div class="draw" style="padding-left: 25px; margin-left: 20px" @click="drawEcharts">生成可视化展现</div>
class="draw"
style="padding-left: 25px; margin-left: 20px"
@click="drawEcharts"
>
生成可视化展现
</div>
<div id="echarts1" style="width: 500px; height: 320px"></div> <div id="echarts1" style="width: 500px; height: 320px"></div>
</div> </div>
<div class="step1Table"> <div class="step1Table">
@ -80,21 +70,15 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="推广渠道" align="center" prop="data1"> <el-table-column label="推广渠道" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="浏览时间" align="center" prop="data2"></el-table-column>
<el-table-column label="浏览时间" align="center" prop="data2">
</el-table-column>
</el-table> </el-table>
</div> </div>
<div style="margin-top: 40px"> <div style="margin-top: 40px">
<div class="analysisBtn">图表分析</div> <div class="analysisBtn">图表分析</div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>1、推广渠道中，获客数量最多的是：</p> <p>1、推广渠道中，获客数量最多的是：</p>
<el-select <el-select v-model="step1Params1" placeholder="请选择" style="width: 200px">
v-model="step1Params1"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'基础线上工作'" :value="'基础线上工作'" /> <el-option :label="'基础线上工作'" :value="'基础线上工作'" />
<el-option :label="'手机厂商预装'" :value="'手机厂商预装'" /> <el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
<el-option :label="'新媒体推广'" :value="'新媒体推广'" /> <el-option :label="'新媒体推广'" :value="'新媒体推广'" />
@ -103,20 +87,14 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>2、哪种渠道的获客质量最高：</p> <p>2、哪种渠道的获客质量最高：</p>
<el-select <el-select v-model="step1Params2" placeholder="请选择" style="width: 200px">
v-model="step1Params2"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'基础线上工作'" :value="'基础线上工作'" /> <el-option :label="'基础线上工作'" :value="'基础线上工作'" />
<el-option :label="'手机厂商预装'" :value="'手机厂商预装'" /> <el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
<el-option :label="'新媒体推广'" :value="'新媒体推广'" /> <el-option :label="'新媒体推广'" :value="'新媒体推广'" />
<el-option :label="'线下活动推广'" :value="'线下活动推广'" /> <el-option :label="'线下活动推广'" :value="'线下活动推广'" />
</el-select> </el-select>
</div> </div>
<div class="submit" style="margin-top: 75px" @click="step1Submit"> <div class="submit" style="margin-top: 75px" @click="step1Submit">提交</div>
提交
</div>
</div> </div>
</div> </div>
</div> </div>
@ -127,35 +105,20 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<span>第二步，激活分析</span> <span>第二步，激活分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
有了用户之后就需要提高活跃度，用户光注册没啥用，需要经常登录、使用app才行。据有效数据表明，当新用户进入产品之后的次日活跃开始计算，80%以上的新用户都不会被再次激活。而对于买菜app来说，只有产生过订单的用户才能算作被激活。<br /> 有了用户之后就需要提高活跃度，用户光注册没啥用，需要经常登录、使用app才行。据有效数据表明，当新用户进入产品之后的次日活跃开始计算，80%以上的新用户都不会被再次激活。而对于买菜app来说，只有产生过订单的用户才能算作被激活。
<br />
对各月份的用户新增情况进行分析，折线图如下图： 对各月份的用户新增情况进行分析，折线图如下图：
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div> <div>
<div <div @click="drawLineEchart" class="draw" style="padding-left: 25px; margin-bottom: 10px; background-size: 180px 31px; width: 180px; padding-left: 32px">生成月度激活率图表</div>
@click="drawLineEchart"
class="draw"
style="
padding-left: 25px;
margin-bottom: 10px;
background-size: 180px 31px;
width: 180px;
padding-left: 32px;
"
>
生成月度激活率图表
</div>
<div id="echartsLine" style="width: 1000px; height: 274px"></div> <div id="echartsLine" style="width: 1000px; height: 274px"></div>
</div> </div>
<div style="margin-top: 40px"> <div style="margin-top: 40px">
<div class="analysisBtn">图表分析</div> <div class="analysisBtn">图表分析</div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>1、月度平均激活率是多少：</p> <p>1、月度平均激活率是多少：</p>
<el-select <el-select v-model="step2Params1" placeholder="请选择" style="width: 200px">
v-model="step2Params1"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'50%'" :value="'50%'" /> <el-option :label="'50%'" :value="'50%'" />
<el-option :label="'60%'" :value="'60%'" /> <el-option :label="'60%'" :value="'60%'" />
<el-option :label="'70%'" :value="'70%'" /> <el-option :label="'70%'" :value="'70%'" />
@ -165,22 +128,11 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>2、需要重点分析哪个月的激活率：</p> <p>2、需要重点分析哪个月的激活率：</p>
<el-select <el-select v-model="step2Params2" placeholder="请选择" style="width: 200px">
v-model="step2Params2" <el-option :label="item.label" :value="item.value" v-for="item in activationList" :key="item.value" />
placeholder="请选择"
style="width: 200px"
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in activationList"
:key="item.value"
/>
</el-select> </el-select>
</div> </div>
<div class="submit" style="margin-top: 75px" @click="step2Submit"> <div class="submit" style="margin-top: 75px" @click="step2Submit">提交</div>
提交
</div>
</div> </div>
</div> </div>
</div> </div>
@ -190,14 +142,10 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第三步，留存分析</span> <span>第三步，留存分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">用户激活之后，不留存的话最终也都将流失，徒劳一场。对于买菜app来说，用户激活之后，如果不能留下来的话，那此前的工作基本都是无用的。我们可以分析一周留存率、双周留存率和月留存率，发现用户留存率仍有较大提升空间，可以分析流失原因，进一步提高产品体验，挽留已有客户。</span>
用户激活之后，不留存的话最终也都将流失，徒劳一场。对于买菜app来说，用户激活之后，如果不能留下来的话，那此前的工作基本都是无用的。我们可以分析一周留存率、双周留存率和月留存率，发现用户留存率仍有较大提升空间，可以分析流失原因，进一步提高产品体验，挽留已有客户。
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div> <div>
<div class="draw" style="padding-left: 25px; margin-bottom: 10px"> <div class="draw" style="padding-left: 25px; margin-bottom: 10px">生成留存率图表</div>
生成留存率图表
</div>
<el-table <el-table
:data="step3Data" :data="step3Data"
@ -209,37 +157,17 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="注册日期" align="center" prop="date"> <el-table-column label="注册日期" align="center" prop="date"></el-table-column>
</el-table-column> <el-table-column label="一周留存率（%）" align="center" prop="ratio1"></el-table-column>
<el-table-column <el-table-column label="两周留存率（%）" align="center" prop="ratio2"></el-table-column>
label="一周留存率（%）" <el-table-column label="30天留存率（%）" align="center" prop="ratio3"></el-table-column>
align="center"
prop="ratio1"
>
</el-table-column>
<el-table-column
label="两周留存率（%）"
align="center"
prop="ratio2"
>
</el-table-column>
<el-table-column
label="30天留存率（%）"
align="center"
prop="ratio3"
>
</el-table-column>
</el-table> </el-table>
</div> </div>
<div style="margin-top: 40px"> <div style="margin-top: 40px">
<div class="analysisBtn">图表分析</div> <div class="analysisBtn">图表分析</div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>1、两周平均留存率是多少：</p> <p>1、两周平均留存率是多少：</p>
<el-select <el-select v-model="step3Params1" placeholder="请选择" style="width: 200px">
v-model="step3Params1"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'37.63%'" :value="'37.63%'" /> <el-option :label="'37.63%'" :value="'37.63%'" />
<el-option :label="'13.25%'" :value="'13.25%'" /> <el-option :label="'13.25%'" :value="'13.25%'" />
<el-option :label="'14.11%'" :value="'14.11%'" /> <el-option :label="'14.11%'" :value="'14.11%'" />
@ -247,19 +175,13 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>2、从哪个时间段开始留存下来的客户，是公司的忠诚用户：</p> <p>2、从哪个时间段开始留存下来的客户，是公司的忠诚用户：</p>
<el-select <el-select v-model="step3Params2" placeholder="请选择" style="width: 200px">
v-model="step3Params2"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'一周'" :value="'一周'" /> <el-option :label="'一周'" :value="'一周'" />
<el-option :label="'两周'" :value="'两周'" /> <el-option :label="'两周'" :value="'两周'" />
<el-option :label="'30天'" :value="'30天'" /> <el-option :label="'30天'" :value="'30天'" />
</el-select> </el-select>
</div> </div>
<div class="submit" style="margin-top: 75px" @click="step3Submit"> <div class="submit" style="margin-top: 75px" @click="step3Submit">提交</div>
提交
</div>
</div> </div>
</div> </div>
</div> </div>
@ -269,9 +191,7 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第四步，收入分析</span> <span>第四步，收入分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">获取收入，对产品来说是最重要的一点，当用户激活后，需要考虑的就是如何最大化获取收入，实现盈利。买菜软件的盈利与很多指标有关，我们暂且以提高用户的购买活跃度作为提高收入的的一个主要方式。我们将用户分为三个大类：低活跃用户，普通用户，会员用户。</span>
获取收入，对产品来说是最重要的一点，当用户激活后，需要考虑的就是如何最大化获取收入，实现盈利。买菜软件的盈利与很多指标有关，我们暂且以提高用户的购买活跃度作为提高收入的的一个主要方式。我们将用户分为三个大类：低活跃用户，普通用户，会员用户。
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div> <div>
<el-table <el-table
@ -284,59 +204,39 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="用户类型" align="center" prop="data1"> <el-table-column label="用户类型" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="划分标准" align="center" prop="data2"></el-table-column>
<el-table-column label="划分标准" align="center" prop="data2"> <el-table-column label="用户数量" align="center" prop="data3"></el-table-column>
</el-table-column>
<el-table-column label="用户数量" align="center" prop="data3">
</el-table-column>
</el-table> </el-table>
</div> </div>
<div> <div>
<div class="analysisBtn">图表分析</div> <div class="analysisBtn">图表分析</div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<div style="margin-top: 10px"> <div style="margin-top: 10px">1、各类用户占比：（计算结果保留一位小数）</div>
1、各类用户占比：（计算结果保留一位小数）
</div>
<div style="display: flex"> <div style="display: flex">
<div style="margin-right: 50px"> <div style="margin-right: 50px">
<p>低活跃用户：</p> <p>低活跃用户：</p>
<el-input <el-input style="width: 107px" v-model="step4Params1"></el-input>
style="width: 107px"
v-model="step4Params1"
></el-input>
</div> </div>
<div style="margin-right: 50px"> <div style="margin-right: 50px">
<p>普通用户：</p> <p>普通用户：</p>
<el-input <el-input style="width: 107px" v-model="step4Params2"></el-input>
style="width: 107px"
v-model="step4Params2"
></el-input>
</div> </div>
<div> <div>
<p>会员用户：</p> <p>会员用户：</p>
<el-input <el-input style="width: 107px" v-model="step4Params3"></el-input>
style="width: 107px"
v-model="step4Params3"
></el-input>
</div> </div>
</div> </div>
</div> </div>
<div style="margin-left: 20px"> <div style="margin-left: 20px">
<p>2、需要针对哪类用户制定营销手段来提高他们的活跃度：</p> <p>2、需要针对哪类用户制定营销手段来提高他们的活跃度：</p>
<el-select <el-select v-model="step4Params4" placeholder="请选择" style="width: 200px">
v-model="step4Params4"
placeholder="请选择"
style="width: 200px"
>
<el-option :label="'低活跃用户'" :value="'低活跃用户'" /> <el-option :label="'低活跃用户'" :value="'低活跃用户'" />
<el-option :label="'普通用户'" :value="'普通用户'" /> <el-option :label="'普通用户'" :value="'普通用户'" />
<el-option :label="'会员用户'" :value="'会员用户'" /> <el-option :label="'会员用户'" :value="'会员用户'" />
</el-select> </el-select>
</div> </div>
<div class="submit" style="margin-top: 25px" @click="step4Submit"> <div class="submit" style="margin-top: 25px" @click="step4Submit">提交</div>
提交
</div>
</div> </div>
</div> </div>
</div> </div>
@ -347,9 +247,10 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<span>第五步，自传播分析</span> <span>第五步，自传播分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
当产品有了一定规模的用户之后，就需要考虑激发用户间的自发传播。自传播的数据指标是K因子（推荐系数）：<br /> 当产品有了一定规模的用户之后，就需要考虑激发用户间的自发传播。自传播的数据指标是K因子（推荐系数）：
K = （平均每个用户向他的朋友们发出的邀请的数量）* <br />
（接收到邀请的人转化为新用户的转化率）<br /> K = （平均每个用户向他的朋友们发出的邀请的数量）* （接收到邀请的人转化为新用户的转化率）
<br />
K值的高低，直接体现自传播结果水平，当K值大于1时，将激发自传播巨大的力量，K值越大，力量越强。而若K值小于1，那么传播水平会逐步减弱，直至消失。 K值的高低，直接体现自传播结果水平，当K值大于1时，将激发自传播巨大的力量，K值越大，力量越强。而若K值小于1，那么传播水平会逐步减弱，直至消失。
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -364,14 +265,10 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="用户数量" align="center" prop="data1"> <el-table-column label="用户数量" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="推荐次数" align="center" prop="data2"></el-table-column>
<el-table-column label="推荐次数" align="center" prop="data2"> <el-table-column label="接受推荐人数" align="center" prop="data3"></el-table-column>
</el-table-column> <el-table-column label="K值" align="center" prop="data4"></el-table-column>
<el-table-column label="接受推荐人数" align="center" prop="data3">
</el-table-column>
<el-table-column label="K值" align="center" prop="data4">
</el-table-column>
</el-table> </el-table>
</div> </div>
<div> <div>
@ -380,29 +277,19 @@ https://help.fanruan.com/finebi5.1/doc-view-1256.html"
<div style="display: flex"> <div style="display: flex">
<div style="margin-right: 50px"> <div style="margin-right: 50px">
<p>该买菜app的K值为：（计算结果保留两位小数）</p> <p>该买菜app的K值为：（计算结果保留两位小数）</p>
<el-input <el-input style="width: 107px" v-model="step5Params"></el-input>
style="width: 107px"
v-model="step5Params"
></el-input>
</div> </div>
</div> </div>
</div> </div>
<div style="margin-left: 20px" class="conclusion"> <div style="margin-left: 20px" class="conclusion">结论：拥有了自传播的力量。可以进一步通过“邀请获红包”等运营活动进一步提高 K 值，加快传播速度</div>
结论：拥有了自传播的力量。可以进一步通过“邀请获红包”等运营活动进一步提高 <div class="submit" style="margin-top: 15px" @click="step5Submit">提交</div>
K 值，加快传播速度
</div>
<div class="submit" style="margin-top: 15px" @click="step5Submit">
提交
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false"> <pop-modal :showModel="dialogVisible" @closePop="dialogVisible = false">
<template v-slot:content> <template v-slot:content>
<div v-html="knowledgeHtml"> <div v-html="knowledgeHtml"></div>
</div>
</template> </template>
</pop-modal> </pop-modal>
</div> </div>
@ -865,7 +752,7 @@ const handleChangeDay = (e) => {
}; };
const draw = () => { const draw = () => {
var chartDom = document.getElementById("echarts"); var chartDom = document.getElementById("echarts");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
@ -880,22 +767,7 @@ const draw = () => {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -915,7 +787,7 @@ const draw = () => {
}; };
const drawEcharts = () => { const drawEcharts = () => {
var chartDom = document.getElementById("echarts1"); var chartDom = document.getElementById("echarts1");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
@ -924,7 +796,7 @@ const drawEcharts = () => {
left: "center", left: "center",
top: "10px", top: "10px",
textStyle: { textStyle: {
color: "#fff", // color: "#fff",
// fontSize:16 // fontSize:16
}, },
}, },
@ -933,7 +805,7 @@ const drawEcharts = () => {
data: ["基础线上工作", "手机厂商预装", "新媒体推广", "线下活动推广"], data: ["基础线上工作", "手机厂商预装", "新媒体推广", "线下活动推广"],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#fff", //坐标值得具体的颜色 // color: "#fff", //坐标值得具体的颜色
}, },
}, },
axisLine: {}, axisLine: {},
@ -943,7 +815,7 @@ const drawEcharts = () => {
name: "获取新客数量", name: "获取新客数量",
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#fff", //坐标值得具体的颜色 // color: "#fff", //坐标值得具体的颜色
}, },
}, },
}, },
@ -962,28 +834,17 @@ const drawEcharts = () => {
}; };
const drawLineEchart = () => { const drawLineEchart = () => {
var chartDom = document.getElementById("echartsLine"); var chartDom = document.getElementById("echartsLine");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
xAxis: { xAxis: {
type: "category", type: "category",
boundaryGap: false, boundaryGap: false,
data: [ data: ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06", "2020-07", "2020-08", "2020-09", "2020-10"],
"2020-01",
"2020-02",
"2020-03",
"2020-04",
"2020-05",
"2020-06",
"2020-07",
"2020-08",
"2020-09",
"2020-10",
],
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: "#fff", //坐标值得具体的颜色 // color: "#fff", //坐标值得具体的颜色
}, },
}, },
}, },
@ -993,7 +854,7 @@ const drawLineEchart = () => {
axisLabel: { axisLabel: {
formatter: "{value}%", // 在这里添加单位 formatter: "{value}%", // 在这里添加单位
textStyle: { textStyle: {
color: "#fff", //坐标值得具体的颜色 // color: "#fff", //坐标值得具体的颜色
}, },
}, },
}, },
@ -1093,12 +954,7 @@ const step3Submit = () => {
}; };
const step4Submit = () => { const step4Submit = () => {
step4Error.value = 0; step4Error.value = 0;
if ( if (step4Params1.value == "" || step4Params2.value == "" || step4Params3.value == "" || step4Params4.value == "") {
step4Params1.value == "" ||
step4Params2.value == "" ||
step4Params3.value == "" ||
step4Params4.value == ""
) {
proxy.$modal.msgError("请先完成所有填空"); proxy.$modal.msgError("请先完成所有填空");
return; return;
} }
@ -1246,22 +1102,11 @@ const getData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const submitData = () => { const submitData = () => {
if ( if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value || !step5AnswerFlag.value) {
!step1AnswerFlag.value ||
!step2AnswerFlag.value ||
!step3AnswerFlag.value ||
!step4AnswerFlag.value ||
!step5AnswerFlag.value
) {
proxy.$modal.msgError("请先完成所有步骤！"); proxy.$modal.msgError("请先完成所有步骤！");
return; return;
} }
errorNum.value = errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value + step5Error.value;
step1Error.value +
step2Error.value +
step3Error.value +
step4Error.value +
step5Error.value;
console.log(errorNum.value, "总错误次数"); console.log(errorNum.value, "总错误次数");
portraitModel portraitModel
.submit({ .submit({
@ -1306,7 +1151,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1331,26 +1177,30 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.conclusion { .conclusion {
margin-top: 20px; margin-top: 20px;
padding: 10px; padding: 10px;
width: 577px; width: 577px;
height: 70px; height: 70px;
background: #005b55; // background: #005b55;
background: #f1f6fa;
border: 1px solid #5b87ee;
color: #305fcb;
border-radius: 10px; border-radius: 10px;
color: #28d298; // color: #28d298;
} }
.step1Table { .step1Table {
width: 588px; width: 588px;
height: 313px; height: 313px;
background: #002652; // background: #002652;
border: 1px solid #7995e8; border: 1px solid #7995e8;
margin-left: 20px; margin-left: 20px;
margin-top: 35px; margin-top: 35px;
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
.titleTable { .titleTable {
color: #fff; color: #000;
// margin:0 auto // margin:0 auto
} }
} }
@ -1516,13 +1366,21 @@ defineExpose({
padding-left: 10px; padding-left: 10px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-textarea__inner { ::v-deep .el-textarea__inner {
background: #002652; // background: #002652;
color: #fff; color: #000;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td { ::v-deep .el-table td {

21
src/views/portraitModel/components/abcAnalysis.vue
Unescape Escape View File

@ -942,7 +942,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -965,6 +966,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -1004,9 +1006,10 @@ defineExpose({
align-items: center; align-items: center;
width: 945px; width: 945px;
height: 26px; height: 26px;
background: #003b75; // background: #003b75;
background: #FFF8EE;
border-radius: 10px; border-radius: 10px;
border: 1px solid #0052a3; // border: 1px solid #0052a3;
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
img { img {
@ -1031,9 +1034,17 @@ defineExpose({
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 4px; padding-top: 4px;

26
src/views/portraitModel/components/basketAnalysis.vue
Unescape Escape View File

@ -79,7 +79,7 @@
<img src="@/assets/images/箭头.png" alt="" /> <img src="@/assets/images/箭头.png" alt="" />
<div class="comList"> <div class="comList">
<ul> <ul>
<p>商品组合</p> <p style="color: #fff">商品组合</p>
<li v-for="(item, index) in list" :key="index"> <li v-for="(item, index) in list" :key="index">
<span>{{ item }}</span> <span>{{ item }}</span>
<span v-if="item" style="float: right; margin-right: 5px; cursor: pointer" @click="deleteItem(index)">-</span> <span v-if="item" style="float: right; margin-right: 5px; cursor: pointer" @click="deleteItem(index)">-</span>
@ -821,7 +821,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -844,6 +845,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -883,9 +885,10 @@ defineExpose({
align-items: center; align-items: center;
width: 945px; width: 945px;
height: 26px; height: 26px;
background: #003b75; // background: #003b75;
background: #fff8ee;
border-radius: 10px; border-radius: 10px;
border: 1px solid #0052a3; // border: 1px solid #0052a3;
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
img { img {
@ -931,16 +934,25 @@ defineExpose({
line-height: 30px; line-height: 30px;
width: 122px; width: 122px;
height: 30px; height: 30px;
background: #003b75; // background: #003b75;
background: #fff;
border-bottom: 1px solid #7190d4; border-bottom: 1px solid #7190d4;
font-size: 14px; font-size: 14px;
} }
} }
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 4px; padding-top: 4px;

30
src/views/portraitModel/components/bostonAnalysis.vue
Unescape Escape View File

@ -622,7 +622,7 @@ const drawPointStep4 = (point, color) => {
}; };
const step3EchartInit = () => { const step3EchartInit = () => {
var chartDom = document.getElementById("charts1"); var chartDom = document.getElementById("charts1");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
// var option; // var option;
option.value = { option.value = {
@ -741,7 +741,7 @@ const step3EchartInit = () => {
}; };
const step4EchartInit = () => { const step4EchartInit = () => {
var chartDom = document.getElementById("charts2"); var chartDom = document.getElementById("charts2");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
// var option; // var option;
option2.value = { option2.value = {
@ -1107,7 +1107,7 @@ const step5EchartInit = () => {
optionStep5.value.series[0].markArea.data[2][0].itemStyle.color = quadrant3Color.value; optionStep5.value.series[0].markArea.data[2][0].itemStyle.color = quadrant3Color.value;
optionStep5.value.series[0].markArea.data[3][0].itemStyle.color = quadrant4Color.value; optionStep5.value.series[0].markArea.data[3][0].itemStyle.color = quadrant4Color.value;
var chartDom = document.getElementById("charts3"); var chartDom = document.getElementById("charts3");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
optionStep5.value && myChart.setOption(optionStep5.value); optionStep5.value && myChart.setOption(optionStep5.value);
myChart.getZr().on("click", function (param) { myChart.getZr().on("click", function (param) {
if (drawPointColorStep5.value == "") { if (drawPointColorStep5.value == "") {
@ -1448,7 +1448,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1471,6 +1472,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -1510,9 +1512,10 @@ defineExpose({
align-items: center; align-items: center;
width: 945px; width: 945px;
height: 26px; height: 26px;
background: #003b75; // background: #003b75;
background: #fff8ee;
border-radius: 10px; border-radius: 10px;
border: 1px solid #0052a3; // border: 1px solid #0052a3;
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
img { img {
@ -1530,7 +1533,8 @@ defineExpose({
height: 19px; height: 19px;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
background: #002651; // background: #002651;
background: #fff;
border: 1px solid #67b3d6; border: 1px solid #67b3d6;
text-align: center; text-align: center;
line-height: 19px; line-height: 19px;
@ -1554,9 +1558,17 @@ defineExpose({
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 4px; padding-top: 4px;

16
src/views/portraitModel/components/funnelAnalysis.vue
Unescape Escape View File

@ -1014,7 +1014,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1037,6 +1038,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color:#000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -1095,9 +1097,17 @@ defineExpose({
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 4px; padding-top: 4px;

34
src/views/portraitModel/components/portraitAnalysis.vue
Unescape Escape View File

@ -1261,7 +1261,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1286,12 +1287,15 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.selectUl { .selectUl {
margin: 0; margin: 0;
padding: 0; padding: 0;
margin-left: 20px; margin-left: 20px;
background: #022603; // background: #022603;
border: 1px solid #338554; background: #FDEFDD;
// border: 1px solid #338554;
border: 1px solid #F7B55F;
.selectLi { .selectLi {
list-style-type: none; list-style-type: none;
display: inline-block; display: inline-block;
@ -1302,7 +1306,8 @@ defineExpose({
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
border-right: 1px solid #338554; // border-right: 1px solid #338554;
border-right: 1px solid #F7B55F;
} }
.selectLi:nth-last-of-type(1) { .selectLi:nth-last-of-type(1) {
border-right: none; border-right: none;
@ -1557,13 +1562,26 @@ defineExpose({
padding-left: 10px; padding-left: 10px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
// ::v-deep .el-textarea__inner {
// background: #002652;
// color: #fff;
// // color: #5397C3;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-textarea__inner { ::v-deep .el-textarea__inner {
background: #002652; // background: #002652;
color: #fff; color: #000;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td { ::v-deep .el-table td {

16
src/views/portraitModel/components/repurchaseAnalysis.vue
Unescape Escape View File

@ -1956,7 +1956,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1981,6 +1982,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -2103,9 +2105,17 @@ defineExpose({
cursor: pointer; cursor: pointer;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 4px; padding-top: 4px;

423
src/views/portraitModel/components/retainAnalysis.vue
Unescape Escape View File

@ -19,9 +19,7 @@
<img src="@/assets/images/caseIcon.png" alt="" /> <img src="@/assets/images/caseIcon.png" alt="" />
<span>案例背景：</span> <span>案例背景：</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以下是某APP注册用户14天的登录数据，请展开留存分析。</span>
以下是某APP注册用户14天的登录数据，请展开留存分析。
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
@ -32,46 +30,34 @@
fontSize: '14px', fontSize: '14px',
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="日期" align="center" prop="date"> <el-table-column label="日期" align="center" prop="date"></el-table-column>
</el-table-column> <el-table-column label="新增用户数" align="center" prop="addNum" width="120"></el-table-column>
<el-table-column label="新增用户数" align="center" prop="addNum" width="120"> <el-table-column label="次日" align="center" prop="day2"></el-table-column>
</el-table-column> <el-table-column label="3日" align="center" prop="day3"></el-table-column>
<el-table-column label="次日" align="center" prop="day2"> <el-table-column label="4日" align="center" prop="day4"></el-table-column>
</el-table-column> <el-table-column label="5日" align="center" prop="day5"></el-table-column>
<el-table-column label="3日" align="center" prop="day3"> <el-table-column label="6日" align="center" prop="day6"></el-table-column>
</el-table-column> <el-table-column label="7日" align="center" prop="day7"></el-table-column>
<el-table-column label="4日" align="center" prop="day4"> <el-table-column label="8日" align="center" prop="day8"></el-table-column>
</el-table-column> <el-table-column label="9日" align="center" prop="day9"></el-table-column>
<el-table-column label="5日" align="center" prop="day5"> <el-table-column label="10日" align="center" prop="day10"></el-table-column>
</el-table-column> <el-table-column label="11日" align="center" prop="day11"></el-table-column>
<el-table-column label="6日" align="center" prop="day6"> <el-table-column label="12日" align="center" prop="day12"></el-table-column>
</el-table-column> <el-table-column label="13日" align="center" prop="day13"></el-table-column>
<el-table-column label="7日" align="center" prop="day7"> <el-table-column label="14日" align="center" prop="day14"></el-table-column>
</el-table-column>
<el-table-column label="8日" align="center" prop="day8">
</el-table-column>
<el-table-column label="9日" align="center" prop="day9">
</el-table-column>
<el-table-column label="10日" align="center" prop="day10">
</el-table-column>
<el-table-column label="11日" align="center" prop="day11">
</el-table-column>
<el-table-column label="12日" align="center" prop="day12">
</el-table-column>
<el-table-column label="13日" align="center" prop="day13">
</el-table-column>
<el-table-column label="14日" align="center" prop="day14">
</el-table-column>
</el-table> </el-table>
<div class="download" @click="downloadData">下载数据</div> <div class="download" @click="downloadData">下载数据</div>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
表格列指标释义：<br /> 表格列指标释义：
新增用户数，表示当日注册的用户数<br /> <br />
次日：当日注册的这批用户在次日有XX人访问<br /> 新增用户数，表示当日注册的用户数
3日：当日注册的这批用户在注册后的第3日有XX人访问<br /> <br />
次日：当日注册的这批用户在次日有XX人访问
<br />
3日：当日注册的这批用户在注册后的第3日有XX人访问
<br />
7日：当日注册的这批用户在注册后的第7日有XX人访问 7日：当日注册的这批用户在注册后的第7日有XX人访问
</span> </span>
</div> </div>
@ -82,7 +68,8 @@
<span>第一步，留存率的计算</span> <span>第一步，留存率的计算</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
留存率是指：某日用户数在第N日仍启动该App的用户比例，留存分析即分析用户随时间变化的活跃情况。获取用户只是第一步，留住用户才是所有产品最终目标。<br /> 留存率是指：某日用户数在第N日仍启动该App的用户比例，留存分析即分析用户随时间变化的活跃情况。获取用户只是第一步，留住用户才是所有产品最终目标。
<br />
请按照留存率的计算公式，补全空缺的数据，计算结果保留小数点后0位。 请按照留存率的计算公式，补全空缺的数据，计算结果保留小数点后0位。
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -96,177 +83,84 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="日期" align="center" prop="date"> <el-table-column label="日期" align="center" prop="date"></el-table-column>
</el-table-column> <el-table-column label="新增用户数" align="center" prop="addNum" width="120"></el-table-column>
<el-table-column label="新增用户数" align="center" prop="addNum" width="120">
</el-table-column>
<el-table-column label="次日" align="center" prop="day2"> <el-table-column label="次日" align="center" prop="day2">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 12" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 12">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 12"
size="small"
>
</el-input
><span v-if="scope.$index == 12">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="3日" align="center" prop="day3"> <el-table-column label="3日" align="center" prop="day3">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 11" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 11">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 11"
size="small"
>
</el-input
><span v-if="scope.$index == 11">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="4日" align="center" prop="day4"> <el-table-column label="4日" align="center" prop="day4">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 10" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 10">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 10"
size="small"
>
</el-input
><span v-if="scope.$index == 10">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="5日" align="center" prop="day5"> <el-table-column label="5日" align="center" prop="day5">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 9" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 9">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 9"
size="small"
>
</el-input
><span v-if="scope.$index == 9">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="6日" align="center" prop="day6"> <el-table-column label="6日" align="center" prop="day6">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 8" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 8">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 8"
size="small"
>
</el-input
><span v-if="scope.$index == 8">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="7日" align="center" prop="day7"> <el-table-column label="7日" align="center" prop="day7">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 7" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 7">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 7"
size="small"
>
</el-input
><span v-if="scope.$index == 7">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="8日" align="center" prop="day8"> <el-table-column label="8日" align="center" prop="day8">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 6" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 6">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 6"
size="small"
>
</el-input
><span v-if="scope.$index == 6">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="9日" align="center" prop="day9"> <el-table-column label="9日" align="center" prop="day9">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 5" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 5">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 5"
size="small"
>
</el-input
><span v-if="scope.$index == 5">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="10日" align="center" prop="day10"> <el-table-column label="10日" align="center" prop="day10">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 4" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 4">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 4"
size="small"
>
</el-input
><span v-if="scope.$index == 4">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="11日" align="center" prop="day11"> <el-table-column label="11日" align="center" prop="day11">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 3" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 3">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 3"
size="small"
>
</el-input
><span v-if="scope.$index == 3">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="12日" align="center" prop="day12"> <el-table-column label="12日" align="center" prop="day12">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 2" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 2">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 2"
size="small"
>
</el-input
><span v-if="scope.$index == 2">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="13日" align="center" prop="day13"> <el-table-column label="13日" align="center" prop="day13">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 1" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 1">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 1"
size="small"
>
</el-input
><span v-if="scope.$index == 1">%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="14日" align="center" prop="day14"> <el-table-column label="14日" align="center" prop="day14">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params" placeholder="输入" style="width: 50px" v-if="scope.$index == 0" size="small"></el-input>
v-model="scope.row.params" <span v-if="scope.$index == 0">%</span>
placeholder="输入"
style="width: 50px"
v-if="scope.$index == 0"
size="small"
>
</el-input
><span v-if="scope.$index == 0">%</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -280,8 +174,10 @@
<span>第二步，留存分析常用口径计算</span> <span>第二步，留存分析常用口径计算</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
从时间维度划分，常见的的有：次日留存、3日留存、7日留存、14日留存、30日留存、60日留存。<br /> 从时间维度划分，常见的的有：次日留存、3日留存、7日留存、14日留存、30日留存、60日留存。
从用户维度划分，常见的的有：新用户留存、活跃留存。<br /> <br />
从用户维度划分，常见的的有：新用户留存、活跃留存。
<br />
请按照第一步计算的表格数据，计算次日留存、3日留存、7日留存、14日留存的平均数，计算结果保留小数点后0位。 请按照第一步计算的表格数据，计算次日留存、3日留存、7日留存、14日留存的平均数，计算结果保留小数点后0位。
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -295,50 +191,29 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="" align="center" prop="name"> <el-table-column label="" align="center" prop="name"></el-table-column>
</el-table-column>
<el-table-column label="次日" align="center" prop="description"> <el-table-column label="次日" align="center" prop="description">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 70px"></el-input>
v-model="scope.row.params1" <span>%</span>
placeholder="请输入"
style="width: 70px"
>
</el-input
><span>%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="3日" align="center" prop="description"> <el-table-column label="3日" align="center" prop="description">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 70px"></el-input>
v-model="scope.row.params2" <span>%</span>
placeholder="请输入"
style="width: 70px"
>
</el-input
><span>%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="7日" align="center" prop="description"> <el-table-column label="7日" align="center" prop="description">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 70px"></el-input>
v-model="scope.row.params3" <span>%</span>
placeholder="请输入"
style="width: 70px"
>
</el-input
><span>%</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="14日" align="center" prop="amount"> <el-table-column label="14日" align="center" prop="amount">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params4" placeholder="请输入" style="width: 70px"></el-input>
v-model="scope.row.params4" <span>%</span>
placeholder="请输入"
style="width: 70px"
>
</el-input
><span>%</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -351,43 +226,26 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第三步，留存率可视化分析</span> <span>第三步，留存率可视化分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以2021/8/1注册的新增的用户数据为例，绘制之后14日的留存率折线图：</span>
以2021/8/1注册的新增的用户数据为例，绘制之后14日的留存率折线图：
</span>
<div class="draw" @click="draw">绘制</div> <div class="draw" @click="draw">绘制</div>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<div id="echarts" style="width: 400px; height: 300px"></div> <div id="echarts" style="width: 400px; height: 300px"></div>
<div style="margin-left: 50px"> <div style="margin-left: 50px">
<p>通过图表分析，新增用户在哪天之后趋向于平稳</p> <p>通过图表分析，新增用户在哪天之后趋向于平稳</p>
<el-select <el-select v-model="dayValue" placeholder="请选择" style="width: 120px" size="default" @change="handleChangeDay">
v-model="dayValue" <el-option v-for="item in dayOptions" :key="item.value" :label="item.label" :value="item.value" />
placeholder="请选择"
style="width: 120px"
size="default"
@change="handleChangeDay"
>
<el-option
v-for="item in dayOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
<div class="analysis"> <div class="analysis">
<div class="conclusion">分析结论：</div> <div class="conclusion">分析结论：</div>
<span> <span>
1、7日留存率，只有27%，流失率达到了73%，相对比较低，需要提供用户粘性；<br /> 1、7日留存率，只有27%，流失率达到了73%，相对比较低，需要提供用户粘性；
2、平缓之后，能够留存下来的客户，是公司的忠诚用户；<br /> <br />
2、平缓之后，能够留存下来的客户，是公司的忠诚用户；
<br />
3、14日的留存率，每天一直下降，需要找出原因。 3、14日的留存率，每天一直下降，需要找出原因。
</span> </span>
</div> </div>
<div <div class="submit" @click="step3Submit" style="margin-top: 20px; margin-left: 0px">提交</div>
class="submit"
@click="step3Submit"
style="margin-top: 20px; margin-left: 0px"
>
提交
</div>
</div> </div>
</div> </div>
</div> </div>
@ -398,15 +256,24 @@
<span>第四步，平均留存分析</span> <span>第四步，平均留存分析</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
留存分析的适用场景：<br /> 留存分析的适用场景：
日留存率: <br /> <br />
快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。<br /> 日留存率:
快速判断用户粘性，比如用户是否更易受促销活动的影响等等。<br /> <br />
周留存率: <br /> 快速判断产品是否迎合市场需求，比如新手对产品的UI设计、功能设置、新手引导等的体验是否满意，是否需做调整。
判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。<br /> <br />
分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。<br /> 快速判断用户粘性，比如用户是否更易受促销活动的影响等等。
月留存率：<br /> <br />
评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。<br /> 周留存率:
<br />
判断用户忠诚度，用户此时对产品基本已有完整的体验。一整套流程体验下来，继续访问的用户可判断为潜在忠诚用户。
<br />
分析用户再次访问的原因，找出产品最能巩固用户的点，且参考此点以一贯之，拓展应用到更多的用户身上，促使更多的用户留下来。
<br />
月留存率：
<br />
评估迭代与优化的效果。砍掉留存率低的产品功能，进行迭代优化。
<br />
平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。 平均留存率的分析，需要结合公司不同时期，与行业平均水平进行对比，找出差距，分析相关原因，从而制定营销策略。
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -420,16 +287,11 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="" align="center" prop="name"> <el-table-column label="" align="center" prop="name"></el-table-column>
</el-table-column> <el-table-column label="次日" align="center" prop="data1"></el-table-column>
<el-table-column label="次日" align="center" prop="data1"> <el-table-column label="3日" align="center" prop="data2"></el-table-column>
</el-table-column> <el-table-column label="7日" align="center" prop="data3"></el-table-column>
<el-table-column label="3日" align="center" prop="data2"> <el-table-column label="14日" align="center" prop="data4"></el-table-column>
</el-table-column>
<el-table-column label="7日" align="center" prop="data3">
</el-table-column>
<el-table-column label="14日" align="center" prop="data4">
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -439,22 +301,20 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第五步，留存分析应用场景</span> <span>第五步，留存分析应用场景</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">日常工作中，留存分析常用于下述场景：</span>
日常工作中，留存分析常用于下述场景：
</span>
<div style="font-size: 14px; margin-top: 10px"> <div style="font-size: 14px; margin-top: 10px">
1. 了解一个渠道的质量<br /> 1. 了解一个渠道的质量
可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期）， <br />
以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。 可以使用「日留存」来衡量各渠道用户的表现，并以此作为衡量渠道质量的标准之一。如对不同渠道来源的用户进行次日留存、7日留存的对比（不同行业可能选择不同周期）， 以此衡量不同渠道的用户留存情况。一般来说，留存情况较好可以反应这个渠道质量较好。
</div> </div>
<div style="font-size: 14px; margin-top: 10px"> <div style="font-size: 14px; margin-top: 10px">
2. 判断运营手段/某项功能改动是否奏效<br /> 2. 判断运营手段/某项功能改动是否奏效
当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。 <br />
以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户， 当我们期待某个运营手段/某项功能可以期提升留存时，可以对通过分析该运营手段/功能，「覆盖到的新用户」和「未覆盖到的新用户」的留存率，对两部分用户的留存进行对比，来验证手段/功能的有效性。 以贴吧为例，该贴吧想检验“看贴”功能是否对新用户的留存是有提升效果，于是对同样来自A渠道的新用户（一部分使用了看贴功能，一部分没有使用看贴功能）进行留存对比。通过比较发现，使用过看贴功能的新用户， 三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
三日留存率比未使用过该功能的新用户，多了10%以上。这说明“看贴”功能对新用户留存有着正向促进作用。
</div> </div>
<div style="font-size: 14px; margin-top: 10px"> <div style="font-size: 14px; margin-top: 10px">
3. 衡量一个产品是否健康<br /> 3. 衡量一个产品是否健康
<br />
可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。 可以使用「周留存」、「月留存」等指标观察用户在平台上的粘性，衡量产品的健康情况。
</div> </div>
</div> </div>
@ -1364,21 +1224,7 @@ const dayOptions = ref([
label: "14日", label: "14日",
}, },
]); ]);
const step1RightAnswer = ref([ const step1RightAnswer = ref(["4", "5", "6", "7", "9", "14", "18", "19", "30", "41", "57", "72", "79"]);
"4",
"5",
"6",
"7",
"9",
"14",
"18",
"19",
"30",
"41",
"57",
"72",
"79",
]);
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
@ -1463,7 +1309,7 @@ const handleChangeDay = (e) => {
}; };
const draw = () => { const draw = () => {
var chartDom = document.getElementById("echarts"); var chartDom = document.getElementById("echarts");
var myChart = echarts.init(chartDom, "dark"); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
@ -1478,22 +1324,7 @@ const draw = () => {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: [ data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
],
}, },
yAxis: { yAxis: {
type: "value", type: "value",
@ -1543,12 +1374,7 @@ const step1Submit = () => {
}; };
const step2Submit = () => { const step2Submit = () => {
step2Error.value = 0; step2Error.value = 0;
if ( if (!step2Data.value[0].params1 || !step2Data.value[0].params2 || !step2Data.value[0].params3 || !step2Data.value[0].params4) {
!step2Data.value[0].params1 ||
!step2Data.value[0].params2 ||
!step2Data.value[0].params3 ||
!step2Data.value[0].params4
) {
proxy.$modal.msgError("请先完成所有填空"); proxy.$modal.msgError("请先完成所有填空");
return; return;
} }
@ -1701,11 +1527,7 @@ const getData = () => {
.catch((error) => {}); .catch((error) => {});
}; };
const submitData = () => { const submitData = () => {
if ( if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value) {
!step1AnswerFlag.value ||
!step2AnswerFlag.value ||
!step3AnswerFlag.value
) {
proxy.$modal.msgError("请先完成所有步骤！"); proxy.$modal.msgError("请先完成所有步骤！");
return; return;
} }
@ -1754,7 +1576,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1779,6 +1602,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -1893,7 +1717,10 @@ defineExpose({
.analysis { .analysis {
width: 577px; width: 577px;
height: 117px; height: 117px;
background: #005b55; // background: #005b55;
background: #f1f6fa;
border: 1px solid #5b87ee;
color:#305FCB;
border-radius: 10px; border-radius: 10px;
margin-top: 20px; margin-top: 20px;
font-size: 14px; font-size: 14px;
@ -1917,9 +1744,17 @@ defineExpose({
cursor: pointer; cursor: pointer;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-table td { ::v-deep .el-table td {
padding-top: 3px; padding-top: 3px;

354
src/views/portraitModel/components/rfmAnalysis.vue
Unescape Escape View File

@ -2,7 +2,7 @@
<div class="content"> <div class="content">
<div class="import" @click="dialogVisible = true"> <div class="import" @click="dialogVisible = true">
<img src="@/assets/images/导入.png" alt="" /> <img src="@/assets/images/导入.png" alt="" />
<span>任务知识导入</span> <span style="color:#fff">任务知识导入</span>
</div> </div>
<!-- <div v-html="knowledge" v-if="knowledgeFlag"></div> --> <!-- <div v-html="knowledge" v-if="knowledgeFlag"></div> -->
<div> <div>
@ -11,9 +11,7 @@
<img src="@/assets/images/caseIcon.png" alt="" /> <img src="@/assets/images/caseIcon.png" alt="" />
<span>案例背景：</span> <span>案例背景：</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">现有以下原始数据，需要采用RFM分析方法，对客户进行分类：</span>
现有以下原始数据，需要采用RFM分析方法，对客户进行分类：
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
@ -25,14 +23,10 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="用户ID" align="center" prop="userId"> <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
</el-table-column> <el-table-column label="用户名称" align="center" prop="userName"></el-table-column>
<el-table-column label="用户名称" align="center" prop="userName"> <el-table-column label="消费时间" align="center" prop="time"></el-table-column>
</el-table-column> <el-table-column label="消费金额" align="center" prop="amount"></el-table-column>
<el-table-column label="消费时间" align="center" prop="time">
</el-table-column>
<el-table-column label="消费金额" align="center" prop="amount">
</el-table-column>
</el-table> </el-table>
<div class="download" @click="downloadData">下载数据</div> <div class="download" @click="downloadData">下载数据</div>
</div> </div>
@ -43,9 +37,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第一步，确定“近一段时间”的时间间隔</span> <span>第一步，确定“近一段时间”的时间间隔</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">计划分析最近30天的用户，假设现在是2025.05.30，需要对数据进行筛选，筛选出统计样本</span>
计划分析最近30天的用户，假设现在是2025.05.30，需要对数据进行筛选，筛选出统计样本
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="fileTable1" :data="fileTable1"
@ -57,21 +49,13 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="用户ID" align="center" prop="userId"> <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
</el-table-column> <el-table-column label="用户名称" align="center" prop="userName"></el-table-column>
<el-table-column label="用户名称" align="center" prop="userName"> <el-table-column label="消费时间" align="center" prop="time"></el-table-column>
</el-table-column> <el-table-column label="消费金额" align="center" prop="amount"></el-table-column>
<el-table-column label="消费时间" align="center" prop="time">
</el-table-column>
<el-table-column label="消费金额" align="center" prop="amount">
</el-table-column>
<el-table-column label="操作" align="center" prop="opr"> <el-table-column label="操作" align="center" prop="opr">
<template #default="scope"> <template #default="scope">
<el-select <el-select v-model="scope.row.params" placeholder="请选择" style="width: 100px">
v-model="scope.row.params"
placeholder="请选择"
style="width: 100px"
>
<el-option :label="'剔除'" :value="'剔除'" /> <el-option :label="'剔除'" :value="'剔除'" />
<el-option :label="'纳入'" :value="'纳入'" /> <el-option :label="'纳入'" :value="'纳入'" />
</el-select> </el-select>
@ -87,9 +71,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第二步，计算每个用户的RFM值</span> <span>第二步，计算每个用户的RFM值</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">以用户为统计对象，计算出每个用户的R、F、M这3个指标</span>
以用户为统计对象，计算出每个用户的R、F、M这3个指标
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step2Data" :data="step2Data"
@ -101,42 +83,21 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="用户ID" align="center" prop="userId"> <el-table-column label="用户ID" align="center" prop="userId"></el-table-column>
</el-table-column> <el-table-column label="用户名称" align="center" prop="userName"></el-table-column>
<el-table-column label="用户名称" align="center" prop="userName"> <el-table-column label="最近一次消费时间间隔（R）" align="center" width="210">
</el-table-column>
<el-table-column
label="最近一次消费时间间隔（R）"
align="center"
width="210"
>
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params1"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="消费频率（F）" align="center"> <el-table-column label="消费频率（F）" align="center">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params2"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="消费金额（M）" align="center"> <el-table-column label="消费金额（M）" align="center">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params3"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -150,9 +111,12 @@
<span>第三步，制定R、F、M评分规则</span> <span>第三步，制定R、F、M评分规则</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">
最近一次消费时间间隔（R），上一次消费离得越近，也就是R的值越小，用户价值越高。<br /> 最近一次消费时间间隔（R），上一次消费离得越近，也就是R的值越小，用户价值越高。
消费频率（F），购买频率越高，也就是F值越大，用户价值越高。<br /> <br />
消费金额（M），消费金额越高，也就是M值越大，用户价值越高。<br /> 消费频率（F），购买频率越高，也就是F值越大，用户价值越高。
<br />
消费金额（M），消费金额越高，也就是M值越大，用户价值越高。
<br />
具体实际业务中，如何定义打分的范围，要根据具体的业务来灵活定，没有统一的标准。将R、F、M3个指标分别按价值从小到大分为1-5分。如下表所示： 具体实际业务中，如何定义打分的范围，要根据具体的业务来灵活定，没有统一的标准。将R、F、M3个指标分别按价值从小到大分为1-5分。如下表所示：
</span> </span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -166,19 +130,10 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column label="按价值打分" align="center" prop="data1"> <el-table-column label="按价值打分" align="center" prop="data1"></el-table-column>
</el-table-column> <el-table-column label="最近一次消费时间间隔(R)" align="center" prop="data2" width="210"></el-table-column>
<el-table-column <el-table-column label="消费频率(F)" align="center" prop="data3"></el-table-column>
label="最近一次消费时间间隔(R)" <el-table-column label="消费金额(M)" align="center" prop="data4"></el-table-column>
align="center"
prop="data2"
width="210"
>
</el-table-column>
<el-table-column label="消费频率(F)" align="center" prop="data3">
</el-table-column>
<el-table-column label="消费金额(M)" align="center" prop="data4">
</el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
@ -188,9 +143,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第四步，给R、F、M按价值打分</span> <span>第四步，给R、F、M按价值打分</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">按照第二步统计的数值，结合第三步的评估规则，对用户R、F、M值进行评分</span>
按照第二步统计的数值，结合第三步的评估规则，对用户R、F、M值进行评分
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step4Data" :data="step4Data"
@ -202,54 +155,24 @@
backgroundColor: '#6A7DE9!important', backgroundColor: '#6A7DE9!important',
}" }"
> >
<el-table-column <el-table-column label="用户ID" align="center" prop="data1" width="70"></el-table-column>
label="用户ID" <el-table-column label="用户名称" align="center" prop="data2"></el-table-column>
align="center" <el-table-column label="最近一次消费时间间隔（R）" align="center" prop="data3" width="210"></el-table-column>
prop="data1" <el-table-column label="消费频率（F）" align="center" prop="data4"></el-table-column>
width="70" <el-table-column label="消费金额（M）" align="center" prop="data5"></el-table-column>
>
</el-table-column>
<el-table-column label="用户名称" align="center" prop="data2">
</el-table-column>
<el-table-column
label="最近一次消费时间间隔（R）"
align="center"
prop="data3"
width="210"
>
</el-table-column>
<el-table-column label="消费频率（F）" align="center" prop="data4">
</el-table-column>
<el-table-column label="消费金额（M）" align="center" prop="data5">
</el-table-column>
<el-table-column label="R值打分" align="center" prop="data4"> <el-table-column label="R值打分" align="center" prop="data4">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params1"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="F值打分" align="center" prop="data4"> <el-table-column label="F值打分" align="center" prop="data4">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params2"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="M值打分" align="center" prop="data4"> <el-table-column label="M值打分" align="center" prop="data4">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params3"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -262,9 +185,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第五步，计算所有用户R、F、M打分值的平均数</span> <span>第五步，计算所有用户R、F、M打分值的平均数</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">按照第四步给各个用户R、F、M的打分值，分别计算各自的平均数（小数点后保留两位小数）</span>
按照第四步给各个用户R、F、M的打分值，分别计算各自的平均数（小数点后保留两位小数）
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step5Data" :data="step5Data"
@ -279,32 +200,17 @@
<el-table-column label="" align="center" prop="title" /> <el-table-column label="" align="center" prop="title" />
<el-table-column label="R值打分" align="center"> <el-table-column label="R值打分" align="center">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params1"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="F值打分" align="center"> <el-table-column label="F值打分" align="center">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params2"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="M值打分" align="center"> <el-table-column label="M值打分" align="center">
<template #default="scope"> <template #default="scope">
<el-input <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 100px"></el-input>
v-model="scope.row.params3"
placeholder="请输入"
style="width: 100px"
>
</el-input>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -317,9 +223,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第六步，计算所有用户R、F、M打分值与平均数的高低情况</span> <span>第六步，计算所有用户R、F、M打分值与平均数的高低情况</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">判断每个用户的价值值R、F、M3个值是高于平均值，还是低于平均值。如果一行里的R值打分大于平均值，就在R值高低列里记录为“高”，否则记录为“低”</span>
判断每个用户的价值值R、F、M3个值是高于平均值，还是低于平均值。如果一行里的R值打分大于平均值，就在R值高低列里记录为“高”，否则记录为“低”
</span>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
<el-table <el-table
:data="step6Data" :data="step6Data"
@ -334,12 +238,9 @@
> >
<el-table-column label="用户ID" align="center" prop="data1" /> <el-table-column label="用户ID" align="center" prop="data1" />
<el-table-column label="用户名称" align="center" prop="data2" /> <el-table-column label="用户名称" align="center" prop="data2" />
<el-table-column label="R值打分" align="center" prop="data3"> <el-table-column label="R值打分" align="center" prop="data3"></el-table-column>
</el-table-column> <el-table-column label="F值打分" align="center" prop="data4"></el-table-column>
<el-table-column label="F值打分" align="center" prop="data4"> <el-table-column label="M值打分" align="center" prop="data5"></el-table-column>
</el-table-column>
<el-table-column label="M值打分" align="center" prop="data5">
</el-table-column>
<el-table-column label="R值高低" align="center" width="130"> <el-table-column label="R值高低" align="center" width="130">
<template #default="scope"> <template #default="scope">
<!-- <el-input <!-- <el-input
@ -349,12 +250,7 @@
v-if="scope.$index != 3" v-if="scope.$index != 3"
> >
</el-input> --> </el-input> -->
<el-select <el-select v-model="scope.row.params1" placeholder="请选择" style="width: 100px" v-if="scope.$index != 3">
v-model="scope.row.params1"
placeholder="请选择"
style="width: 100px"
v-if="scope.$index != 3"
>
<el-option :label="'高'" :value="'高'" /> <el-option :label="'高'" :value="'高'" />
<el-option :label="'低'" :value="'低'" /> <el-option :label="'低'" :value="'低'" />
</el-select> </el-select>
@ -369,12 +265,7 @@
v-if="scope.$index != 3" v-if="scope.$index != 3"
> >
</el-input> --> </el-input> -->
<el-select <el-select v-model="scope.row.params2" placeholder="请选择" style="width: 100px" v-if="scope.$index != 3">
v-model="scope.row.params2"
placeholder="请选择"
style="width: 100px"
v-if="scope.$index != 3"
>
<el-option :label="'高'" :value="'高'" /> <el-option :label="'高'" :value="'高'" />
<el-option :label="'低'" :value="'低'" /> <el-option :label="'低'" :value="'低'" />
</el-select> </el-select>
@ -389,12 +280,7 @@
v-if="scope.$index != 3" v-if="scope.$index != 3"
> >
</el-input> --> </el-input> -->
<el-select <el-select v-model="scope.row.params3" placeholder="请选择" style="width: 100px" v-if="scope.$index != 3">
v-model="scope.row.params3"
placeholder="请选择"
style="width: 100px"
v-if="scope.$index != 3"
>
<el-option :label="'高'" :value="'高'" /> <el-option :label="'高'" :value="'高'" />
<el-option :label="'低'" :value="'低'" /> <el-option :label="'低'" :value="'低'" />
</el-select> </el-select>
@ -410,9 +296,7 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第七步，用户分类</span> <span>第七步，用户分类</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">按照用户分类表格里定义的规则进行比较，就可以得出用户属于哪种类。</span>
按照用户分类表格里定义的规则进行比较，就可以得出用户属于哪种类。
</span>
<div style="text-align: center; width: 800px"> <div style="text-align: center; width: 800px">
<p>用户分类规则</p> <p>用户分类规则</p>
<el-table <el-table
@ -426,22 +310,9 @@
}" }"
> >
<el-table-column label="用户分类" align="center" prop="data1" /> <el-table-column label="用户分类" align="center" prop="data1" />
<el-table-column <el-table-column label="最近一次消费时间间隔（R）" align="center" prop="data2" width="220" />
label="最近一次消费时间间隔（R）" <el-table-column label="消费频率（F）" align="center" prop="data3" />
align="center" <el-table-column label="消费金额（M）" align="center" prop="data4" />
prop="data2"
width="220"
/>
<el-table-column
label="消费频率（F）"
align="center"
prop="data3"
/>
<el-table-column
label="消费金额（M）"
align="center"
prop="data4"
/>
</el-table> </el-table>
</div> </div>
<div style="margin-top: 10px; display: flex"> <div style="margin-top: 10px; display: flex">
@ -457,25 +328,13 @@
> >
<el-table-column label="用户ID" align="center" prop="data1" /> <el-table-column label="用户ID" align="center" prop="data1" />
<el-table-column label="用户名称" align="center" prop="data2" /> <el-table-column label="用户名称" align="center" prop="data2" />
<el-table-column label="R值高低" align="center" prop="data3"> <el-table-column label="R值高低" align="center" prop="data3"></el-table-column>
</el-table-column> <el-table-column label="F值高低" align="center" prop="data4"></el-table-column>
<el-table-column label="F值高低" align="center" prop="data4"> <el-table-column label="M值高低" align="center" prop="data5"></el-table-column>
</el-table-column>
<el-table-column label="M值高低" align="center" prop="data5">
</el-table-column>
<el-table-column label="用户分类" align="center" width="200"> <el-table-column label="用户分类" align="center" width="200">
<template #default="scope"> <template #default="scope">
<el-select <el-select v-model="scope.row.params" placeholder="请选择" style="width: 170px">
v-model="scope.row.params" <el-option :label="item.label" :value="item.value" v-for="item in classifyList" :key="item.value" />
placeholder="请选择"
style="width: 170px"
>
<el-option
:label="item.label"
:value="item.value"
v-for="item in classifyList"
:key="item.value"
/>
</el-select> </el-select>
</template> </template>
</el-table-column> </el-table-column>
@ -489,61 +348,34 @@
<img src="@/assets/images/步骤.png" alt="" /> <img src="@/assets/images/步骤.png" alt="" />
<span>第八步，精细化运营</span> <span>第八步，精细化运营</span>
</div> </div>
<span style="line-height: 25px; font-size: 14px"> <span style="line-height: 25px; font-size: 14px">对用户分类以后要做什么呢？那就是针对每类用户如何制定运营策略，这个具体公司业务不同，方法也不一样。这里举例说明前4类用户。</span>
对用户分类以后要做什么呢？那就是针对每类用户如何制定运营策略，这个具体公司业务不同，方法也不一样。这里举例说明前4类用户。
</span>
<div class="customerType"> <div class="customerType">
<img src="@/assets/images/icon001.png" alt="" /> <img src="@/assets/images/icon001.png" alt="" />
<span>重要价值用户，RFM三个值都很高，要提供VIP服务</span> <span>重要价值用户，RFM三个值都很高，要提供VIP服务</span>
</div> </div>
<div class="customerType"> <div class="customerType">
<img src="@/assets/images/icon002.png" alt="" /> <img src="@/assets/images/icon002.png" alt="" />
<span <span>重要发展用户，消费频率低，但是其他两个值很高，就要想办法提高他的消费频率。</span>
>重要发展用户，消费频率低，但是其他两个值很高，就要想办法提高他的消费频率。</span
>
</div> </div>
<div class="customerType"> <div class="customerType">
<img src="@/assets/images/icon003.png" alt="" /> <img src="@/assets/images/icon003.png" alt="" />
<span <span>重要保持用户，最近消费距离现在时间较远，也就是F值低，但是消费频次和消费金额高。这种用户，是一段时间没来的忠实客户。应该主动和他保持联系，提高复购率。</span>
>重要保持用户，最近消费距离现在时间较远，也就是F值低，但是消费频次和消费金额高。这种用户，是一段时间没来的忠实客户。应该主动和他保持联系，提高复购率。</span
>
</div> </div>
<div class="customerType"> <div class="customerType">
<img src="@/assets/images/icon004.png" alt="" /> <img src="@/assets/images/icon004.png" alt="" />
<span <span>重要挽留客户，最近消费时间距离现在较远、消费频率低，但消费金额高。这种用户，即将流失，要主动联系用户，调查清楚哪里出了问题，并想办法挽回。</span>
>重要挽留客户，最近消费时间距离现在较远、消费频率低，但消费金额高。这种用户，即将流失，要主动联系用户，调查清楚哪里出了问题，并想办法挽回。</span
>
</div> </div>
</div> </div>
</div> </div>
<el-dialog <el-dialog v-model="dialogVisible" title="任务知识导入" style="width: 1108px; height: 798px" custom-class="dialogClass" :show-close="false" class="dialog">
v-model="dialogVisible"
title="任务知识导入"
style="width: 1108px; height: 798px"
custom-class="dialogClass"
:show-close="false"
class="dialog"
>
<template #header="{ close, titleId, titleClass }"> <template #header="{ close, titleId, titleClass }">
<div class="my-header"> <div class="my-header">
<span :id="titleId" :class="titleClass">任务知识导入</span> <span :id="titleId" :class="titleClass">任务知识导入</span>
<img <img class="gbImg" src="../../../assets/images/关闭.png" @click="close" alt="" />
class="gbImg"
src="../../../assets/images/关闭.png"
@click="close"
alt=""
/>
</div> </div>
<img class="xtImg" src="../../../assets/images/线条.png" alt="" /> <img class="xtImg" src="../../../assets/images/线条.png" alt="" />
</template> </template>
<div <div style="color: #fff; margin-top: -35px; padding: 10px; padding-left: 20px">
style="
color: #fff;
margin-top: -35px;
padding: 10px;
padding-left: 20px;
"
>
<el-scrollbar height="650px"> <el-scrollbar height="650px">
<div v-html="knowledge"></div> <div v-html="knowledge"></div>
</el-scrollbar> </el-scrollbar>
@ -1015,11 +847,7 @@ const step6Submit = () => {
// console.log(555); // console.log(555);
step6Error.value = 0; step6Error.value = 0;
for (let i in step6Data.value.slice(0, step6Data.value.length - 1)) { for (let i in step6Data.value.slice(0, step6Data.value.length - 1)) {
if ( if (!step6Data.value[i].params1 || !step6Data.value[i].params2 || !step6Data.value[i].params3) {
!step6Data.value[i].params1 ||
!step6Data.value[i].params2 ||
!step6Data.value[i].params3
) {
proxy.$modal.msgError("请先完成所有填空"); proxy.$modal.msgError("请先完成所有填空");
return; return;
} }
@ -1076,22 +904,13 @@ const step7Submit = () => {
} }
} }
// let step7Error = 0; // let step7Error = 0;
if ( if (step7Data.value[0].params && step7Data.value[0].params !== "重要保持用户") {
step7Data.value[0].params &&
step7Data.value[0].params !== "重要保持用户"
) {
step7Error.value++; step7Error.value++;
} }
if ( if (step7Data.value[1].params && step7Data.value[1].params !== "重要价值用户") {
step7Data.value[1].params &&
step7Data.value[1].params !== "重要价值用户"
) {
step7Error.value++; step7Error.value++;
} }
if ( if (step7Data.value[2].params && step7Data.value[2].params !== "一般发展用户") {
step7Data.value[2].params &&
step7Data.value[2].params !== "一般发展用户"
) {
step7Error.value++; step7Error.value++;
} }
console.log(step7Error.value, "错误数"); console.log(step7Error.value, "错误数");
@ -1099,24 +918,11 @@ const step7Submit = () => {
step7AnswerFlag.value = true; step7AnswerFlag.value = true;
}; };
const submitData = () => { const submitData = () => {
if ( if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step4AnswerFlag.value || !step5AnswerFlag.value || !step6AnswerFlag.value || !step7AnswerFlag.value) {
!step1AnswerFlag.value ||
!step2AnswerFlag.value ||
!step4AnswerFlag.value ||
!step5AnswerFlag.value ||
!step6AnswerFlag.value ||
!step7AnswerFlag.value
) {
proxy.$modal.msgError("请先完成所有步骤！"); proxy.$modal.msgError("请先完成所有步骤！");
return; return;
} }
errorNum.value = errorNum.value = stepError1.value + stepError2.value + step4Error.value + step5Error.value + step6Error.value + step7Error.value;
stepError1.value +
stepError2.value +
step4Error.value +
step5Error.value +
step6Error.value +
step7Error.value;
console.log(errorNum.value, "总错误次数"); console.log(errorNum.value, "总错误次数");
portraitModel portraitModel
.submit({ .submit({
@ -1285,9 +1091,11 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
color: #000;
// opacity: 0.5; // opacity: 0.5;
.import { .import {
@ -1347,9 +1155,10 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
align-items: center; align-items: center;
width: 945px; width: 945px;
height: 26px; height: 26px;
background: #003b75; // background: #003b75;
background: #FFF8EE;
border-radius: 10px; border-radius: 10px;
border: 1px solid #0052a3; // border: 1px solid #0052a3;
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
img { img {
@ -1367,8 +1176,13 @@ const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
} }
} }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #F5F7FA !important;
} }
::v-deep .el-dialog { ::v-deep .el-dialog {

20
src/views/portraitModel/components/viscosityAnalysis.vue
Unescape Escape View File

@ -1889,7 +1889,8 @@ defineExpose({
<style scoped lang="scss"> <style scoped lang="scss">
.content { .content {
width: 100%; width: 100%;
background: rgba(0, 29, 64, 0.5); // background: rgba(0, 29, 64, 0.5);
background: #fff;
border: 1px solid #0452c6; border: 1px solid #0452c6;
padding: 10px; padding: 10px;
// opacity: 0.5; // opacity: 0.5;
@ -1914,6 +1915,7 @@ defineExpose({
} }
} }
.caseBack { .caseBack {
color: #000;
.title { .title {
font-weight: bold; font-weight: bold;
margin-top: 10px; margin-top: 10px;
@ -2064,13 +2066,21 @@ defineExpose({
padding-left: 10px; padding-left: 10px;
} }
} }
// ::v-deep .el-table tr {
// background-color: #002652 !important;
// color: #fff;
// }
::v-deep .el-table tr { ::v-deep .el-table tr {
background-color: #002652 !important; background-color: #fff !important;
color: #fff; color: #000;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #f5f7fa !important;
} }
::v-deep .el-textarea__inner { ::v-deep .el-textarea__inner {
background: #002652; // background: #002652;
color: #fff; color: #000;
// color: #5397C3; // color: #5397C3;
} }
::v-deep .el-table td { ::v-deep .el-table td {

Write Preview
Loading…
Cancel
Save