add bi
This commit is contained in:
parent
438b409d6d
commit
ab94e78123
@ -101,6 +101,113 @@ const userStore = defineStore(
|
||||
children: [],
|
||||
props: true
|
||||
}
|
||||
|
||||
// 添加除gm后台资源操作外的菜单
|
||||
const biDashboardRoute = {
|
||||
path: projectRoute.path + "/bi_dashboard",
|
||||
name: projectRoute.name + "_bi_dashboard",
|
||||
meta: {
|
||||
desc: "看板",
|
||||
projectId: project.project_id,
|
||||
},
|
||||
component: () => import('@/views/bi/dashboardIndex.vue'),
|
||||
props: true
|
||||
}
|
||||
const biAnalyseRoutePath = projectRoute.path + "/bi_analyse"
|
||||
const biAnalyseRoute = {
|
||||
path: biAnalyseRoutePath,
|
||||
name: projectRoute.name + "_bi_analyse",
|
||||
meta: {
|
||||
desc: "数据分析",
|
||||
projectId: project.project_id,
|
||||
},
|
||||
component: () => import('@/views/bi/analyseIndex.vue'),
|
||||
props: true,
|
||||
children: [
|
||||
{
|
||||
path: biAnalyseRoutePath + "/analyse",
|
||||
name: biAnalyseRoutePath + "/analyse",
|
||||
meta: {
|
||||
desc: "分析"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: biAnalyseRoutePath + "/analyse/event",
|
||||
name: biAnalyseRoutePath + "/analyse/event",
|
||||
meta: {
|
||||
desc: "事件分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/event.vue'),
|
||||
},
|
||||
{
|
||||
path: biAnalyseRoutePath + "/analyse/retention",
|
||||
name: biAnalyseRoutePath + "/analyse/retention",
|
||||
meta: {
|
||||
desc: "留存分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/retention.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_user",
|
||||
name: biAnalyseRoutePath + "/bi_user",
|
||||
meta: {
|
||||
desc: "用户"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_user/event",
|
||||
name: biAnalyseRoutePath + "/bi_user/event",
|
||||
meta: {
|
||||
desc: "事件分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/event.vue'),
|
||||
},
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_user/retention",
|
||||
name: biAnalyseRoutePath + "/bi_user/retention",
|
||||
meta: {
|
||||
desc: "留存分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/retention.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_data",
|
||||
name: biAnalyseRoutePath + "/bi_data",
|
||||
meta: {
|
||||
desc: "数据"
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_data/event",
|
||||
name: biAnalyseRoutePath + "/bi_data/event",
|
||||
meta: {
|
||||
desc: "事件分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/event.vue'),
|
||||
},
|
||||
{
|
||||
path: biAnalyseRoutePath + "/bi_data/retention",
|
||||
name: biAnalyseRoutePath + "/bi_data/retention",
|
||||
meta: {
|
||||
desc: "留存分析"
|
||||
},
|
||||
component: () => import('@/views/bi/components/retention.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
projectRoute.children.push(biDashboardRoute)
|
||||
projectRoute.children.push(biAnalyseRoute)
|
||||
this.pushDynamicRouteChildren(biDashboardRoute)
|
||||
this.pushDynamicRouteChildren(biAnalyseRoute)
|
||||
|
||||
// 添加游戏后台gm管理资源菜单
|
||||
const resourceList = project.resource_list
|
||||
resourceList.forEach((resource) => {
|
||||
const routePath = projectRoute.path + "/" + resource.resource
|
||||
|
||||
@ -35,7 +35,7 @@ const handleMenuSelect = (clickResource) => {
|
||||
hasClickedMenu.value = true
|
||||
}
|
||||
|
||||
function handleCommand(command) {
|
||||
function handleAvatarCommand(command) {
|
||||
switch (command) {
|
||||
case "logout":
|
||||
logout();
|
||||
@ -67,13 +67,32 @@ function logout() {
|
||||
<div class="sidebar-content">
|
||||
<!-- <el-avatar shape="square" :size="100" :src="avatarUrl"></el-avatar>-->
|
||||
<div class="sidebar-logo" @click="handleEnterIndex">
|
||||
<img src="@/assets/logo.svg" class="logo" alt="Logo">
|
||||
<span class="system-name">游戏后台管理系统</span>
|
||||
<!-- <img src="@/assets/logo.svg" class="logo" alt="Logo">-->
|
||||
<span class="system-name">游戏数据管理系统</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="avatar-container">
|
||||
<el-dropdown class="avatar-dropdown" trigger="click" @command="handleAvatarCommand">
|
||||
<span class="avatar">
|
||||
<el-icon><User/></el-icon>
|
||||
<p style="margin-left: 5px">{{ nickName }}</p>
|
||||
<el-icon><ArrowDown/></el-icon>
|
||||
</span>
|
||||
<!-- 头像操作下拉菜单 -->
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item>个人中心</el-dropdown-item>-->
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
|
||||
<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" :collapse="false">
|
||||
|
||||
<div style="border-bottom: 1px whitesmoke solid">
|
||||
<div style="border-bottom: 1px whitesmoke solid;border-top: 1px whitesmoke solid;">
|
||||
<!-- 静态菜单 -->
|
||||
<el-sub-menu index="/user">
|
||||
<template #title>
|
||||
@ -116,40 +135,11 @@ function logout() {
|
||||
</div>
|
||||
</el-aside>
|
||||
|
||||
<el-container class="app-container-right">
|
||||
<el-header class="app-header">
|
||||
<div class="header-content">
|
||||
<div class="avatar-container">
|
||||
<el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
|
||||
|
||||
<!-- 头像 -->
|
||||
<span style="font-size: 20px">
|
||||
<el-icon>
|
||||
<User/>
|
||||
</el-icon>
|
||||
{{ nickName }}
|
||||
<el-icon color="black" size="10">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</span>
|
||||
<el-main class="app-main">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</el-main>
|
||||
|
||||
|
||||
<!-- 头像操作下拉菜单 -->
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- <el-dropdown-item>个人中心</el-dropdown-item>-->
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <el-avatar shape="square" :size="100" :src="avatarUrl"></el-avatar>-->
|
||||
</el-header>
|
||||
<el-main class="app-main">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</div>
|
||||
</main>
|
||||
@ -178,37 +168,44 @@ h1 {
|
||||
box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
|
||||
background-color: #4d4f52;
|
||||
|
||||
.avatar-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.app-container-right {
|
||||
.avatar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
min-height: 100vh;
|
||||
margin-left: 200px;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
.app-header {
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-main {
|
||||
height: calc(100vh - 70px);
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
background: #f0f2f5;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
background: transparent; /* 关键：透明背景 */
|
||||
position: relative;
|
||||
@ -218,14 +215,14 @@ h1 {
|
||||
.logo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 1px;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* 添加微光效果 */
|
||||
}
|
||||
|
||||
.system-name {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 文字阴影增强可读性 */
|
||||
@ -268,30 +265,5 @@ h1 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
float: right;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
|
||||
margin-right: 40px;
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
18
ui/src/views/bi/analyseIndex.vue
Normal file
18
ui/src/views/bi/analyseIndex.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
import {defineAsyncComponent} from 'vue';
|
||||
|
||||
const layoutHeader = defineAsyncComponent(() => import("./layout/header/index.vue"))
|
||||
const layoutMain = defineAsyncComponent(() => import("./layout/main/index.vue"))
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-container class="bi_container" direction="vertical">
|
||||
<layoutHeader/>
|
||||
<layoutMain></layoutMain>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
ui/src/views/bi/components/event.vue
Normal file
11
ui/src/views/bi/components/event.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
事件分析
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
ui/src/views/bi/components/retention.vue
Normal file
11
ui/src/views/bi/components/retention.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
留存分析
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
ui/src/views/bi/dashboardIndex.vue
Normal file
11
ui/src/views/bi/dashboardIndex.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
看板界面
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
ui/src/views/bi/layout/header/horizonMenu.vue
Normal file
41
ui/src/views/bi/layout/header/horizonMenu.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup>
|
||||
|
||||
import LocalCache from "@/stores/localCache.js";
|
||||
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const analyseRouteInfo = LocalCache.getCache("resource")
|
||||
|
||||
console.log("analyse route info:", analyseRouteInfo)
|
||||
|
||||
// 处理菜单点击事件
|
||||
const handleMenuSelect = (clickResource) => {
|
||||
console.log("点击资源：", clickResource)
|
||||
// LocalCache.setCache("resource", clickResource)
|
||||
router.push({path: clickResource.path})
|
||||
// hasClickedMenu.value = true
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-menu mode="horizontal">
|
||||
<template v-for="subMenu in analyseRouteInfo.children">
|
||||
<el-sub-menu :index="subMenu.path">
|
||||
<template #title>
|
||||
<span>{{ subMenu.meta.desc }}</span>
|
||||
</template>
|
||||
<el-menu-item v-for="resource in subMenu.children" :key="resource.path" :index="resource.path"
|
||||
@click="handleMenuSelect(resource)">
|
||||
{{ resource.meta.desc }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
23
ui/src/views/bi/layout/header/index.vue
Normal file
23
ui/src/views/bi/layout/header/index.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
import {defineAsyncComponent} from 'vue';
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const menuComp = defineAsyncComponent(() => import("./horizonMenu.vue"))
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-header class="bi_header">
|
||||
<menuComp/>
|
||||
</el-header>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.bi_header {
|
||||
height: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
24
ui/src/views/bi/layout/main/index.vue
Normal file
24
ui/src/views/bi/layout/main/index.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<script setup>
|
||||
import {useRoute, useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-main class="bi_main">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.bi_main {
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
height: calc(100vh - 110px);
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user