|
|
|
|
<template>
|
|
|
|
|
<div class="content">
|
|
|
|
|
<div class="tabList">
|
|
|
|
|
<div
|
|
|
|
|
class="tabs"
|
|
|
|
|
v-for="item in tabList"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@click="changeTab(item)"
|
|
|
|
|
>
|
|
|
|
|
<div style="display: flex; align-items: center">
|
|
|
|
|
<img :src="item.backImg" alt="" />
|
|
|
|
|
<span>{{ item.title }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="container" v-if="menuIndex != 0">
|
|
|
|
|
<div class="leftContent">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/图标1.png" alt="" />
|
|
|
|
|
<span>内置表</span>
|
|
|
|
|
</div>
|
|
|
|
|
<el-menu
|
|
|
|
|
default-active="1"
|
|
|
|
|
@open="handleOpen"
|
|
|
|
|
@close="handleClose"
|
|
|
|
|
@select="handleChange"
|
|
|
|
|
background-color="#041C49"
|
|
|
|
|
style="border-right: none"
|
|
|
|
|
active-text-color="#ffffff"
|
|
|
|
|
text-color="#9BD1FF"
|
|
|
|
|
>
|
|
|
|
|
<el-menu-item index="1">
|
|
|
|
|
<span>用户属性表</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="2">
|
|
|
|
|
<span>用户登录活跃表</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="3">
|
|
|
|
|
<span>用户消费能力表</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="4">
|
|
|
|
|
<span>用户行为表</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="5">
|
|
|
|
|
<span>用户评论表</span>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="table">
|
|
|
|
|
<el-table
|
|
|
|
|
v-if="menuIndex == 1"
|
|
|
|
|
:data="fileTable"
|
|
|
|
|
style="width: 1350px"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="用户ID" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="用户姓名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学号" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="班级" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="专业" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学校" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色名称" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色性别" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色年龄" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="注册时间" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="所在地" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-table
|
|
|
|
|
v-if="menuIndex == 2"
|
|
|
|
|
:data="fileTable"
|
|
|
|
|
style="width: 1350px"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="用户ID" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="用户姓名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学号" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="班级" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="专业" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学校" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色名称" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="常登录地" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="最近登录日期" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录频次" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录时长" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-table
|
|
|
|
|
v-if="menuIndex == 3"
|
|
|
|
|
:data="fileTable"
|
|
|
|
|
style="width: 1350px"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="用户ID" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="用户姓名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学号" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="班级" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="专业" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学校" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色名称" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="消费商品小类"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="消费商品类型"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="累计消费金额"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="累计消费次数"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="近七天消费金额"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="130"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="近七天消费次数"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="130"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="最近消费时间"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-table
|
|
|
|
|
v-if="menuIndex == 4"
|
|
|
|
|
:data="fileTable"
|
|
|
|
|
style="width: 1350px"
|
|
|
|
|
:header-cell-style="{
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: '14px',
|
|
|
|
|
background: `linear-gradient(0deg, #002651 0%, #0087F9 100%)`,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="用户ID" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="登录名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="用户姓名" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学号" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="班级" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="专业" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="学校" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="角色名称" align="center" prop="a1">
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="商品名称"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="商品小类"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="商品类型"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="用户行为类型"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="110"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
label="行为日期"
|
|
|
|
|
align="center"
|
|
|
|
|
prop="a1"
|
|
|
|
|
width="130"
|
|
|
|
|
>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<main-content
|
|
|
|
|
v-if="menuIndex == 0"
|
|
|
|
|
:currentComponent="currentComponent"
|
|
|
|
|
></main-content>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
|
import mainContent from "@/views/components/mainContent.vue";
|
|
|
|
|
import rfmAnalysis from "./components/rfmAnalysis.vue";
|
|
|
|
|
import abcAnalysis from "./components/abcAnalysis.vue";
|
|
|
|
|
import bostonAnalysis from "./components/bostonAnalysis.vue";
|
|
|
|
|
import funnelAnalysis from "./components/funnelAnalysis.vue";
|
|
|
|
|
import basketAnalysis from "./components/basketAnalysis.vue";
|
|
|
|
|
import repurchaseAnalysis from "./components/repurchaseAnalysis.vue"
|
|
|
|
|
const currentComponent = ref(null);
|
|
|
|
|
const menuIndex = ref(1);
|
|
|
|
|
const tabIndex = ref(0);
|
|
|
|
|
const fileTable = ref([
|
|
|
|
|
{
|
|
|
|
|
a1: "666",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
a1: "111",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const tabList = ref([
|
|
|
|
|
{
|
|
|
|
|
id: "1",
|
|
|
|
|
key: rfmAnalysis,
|
|
|
|
|
title: "RFM分析",
|
|
|
|
|
backImg: "src/assets/images/icon1.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "2",
|
|
|
|
|
key: abcAnalysis,
|
|
|
|
|
title: "帕累托/ABC分析",
|
|
|
|
|
backImg: "src/assets/images/icon2.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "3",
|
|
|
|
|
key:bostonAnalysis,
|
|
|
|
|
title: "波士顿矩阵分析",
|
|
|
|
|
backImg: "src/assets/images/icon3.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "4",
|
|
|
|
|
key:funnelAnalysis,
|
|
|
|
|
title: "转化分析-漏斗模型",
|
|
|
|
|
backImg: "src/assets/images/icon4.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "5",
|
|
|
|
|
key:basketAnalysis,
|
|
|
|
|
title: "购物篮分析",
|
|
|
|
|
backImg: "src/assets/images/icon5.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "6",
|
|
|
|
|
key:repurchaseAnalysis,
|
|
|
|
|
title: "复购分析",
|
|
|
|
|
backImg: "src/assets/images/icon6.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "7",
|
|
|
|
|
title: "留存分析",
|
|
|
|
|
backImg: "src/assets/images/icon7.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "8",
|
|
|
|
|
title: "用户粘性分析",
|
|
|
|
|
backImg: "src/assets/images/icon8.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "9",
|
|
|
|
|
title: "AARRR用户运营分析",
|
|
|
|
|
backImg: "src/assets/images/icon9.png",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "10",
|
|
|
|
|
title: "用户画像分析",
|
|
|
|
|
backImg: "src/assets/images/icon10.png",
|
|
|
|
|
},
|
|
|
|
|
]);
|
|
|
|
|
const handleChange = (index) => {
|
|
|
|
|
console.log(index);
|
|
|
|
|
menuIndex.value = index;
|
|
|
|
|
};
|
|
|
|
|
const changeTab = (item) => {
|
|
|
|
|
currentComponent.value = item.key;
|
|
|
|
|
menuIndex.value = 0;
|
|
|
|
|
// tabIndex = item.id;
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.content {
|
|
|
|
|
color: #fff;
|
|
|
|
|
.tabList {
|
|
|
|
|
// display: flex;
|
|
|
|
|
width: 1060px;
|
|
|
|
|
.tabs {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
width: 188px;
|
|
|
|
|
height: 61px;
|
|
|
|
|
background-image: url("@/assets/images/itembg1.png");
|
|
|
|
|
// display: flex;
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
padding-left: 30px;
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(2),
|
|
|
|
|
.tabs:nth-of-type(9) {
|
|
|
|
|
background-image: url("@/assets/images/itembg2.png");
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(3),
|
|
|
|
|
.tabs:nth-of-type(10) {
|
|
|
|
|
background-image: url("@/assets/images/itembg3.png");
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(4),
|
|
|
|
|
.tabs:nth-of-type(6) {
|
|
|
|
|
background-image: url("@/assets/images/itembg4.png");
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(5),
|
|
|
|
|
.tabs:nth-of-type(7) {
|
|
|
|
|
background-image: url("@/assets/images/itembg5.png");
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(8) {
|
|
|
|
|
background-image: url("@/assets/images/itembg1.png");
|
|
|
|
|
}
|
|
|
|
|
.tabs:nth-of-type(4),
|
|
|
|
|
.tabs:nth-of-type(9) {
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
.leftContent {
|
|
|
|
|
width: 205px;
|
|
|
|
|
height: 691px;
|
|
|
|
|
background: #041c49;
|
|
|
|
|
border: 1px solid #063373;
|
|
|
|
|
.title {
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: #3596eb;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
height: 50px;
|
|
|
|
|
border-bottom: 1px solid #063373;
|
|
|
|
|
span {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item {
|
|
|
|
|
padding-left: 40px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.table {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.el-menu-item.is-active {
|
|
|
|
|
// color: var(--el-menu-active-color);
|
|
|
|
|
background-color: #1983dd !important;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table tr {
|
|
|
|
|
background-color: #002652 !important;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
|
|
background-color: #0077dd !important;
|
|
|
|
|
/* color: #fff; */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
