474 lines
10 KiB
Vue
474 lines
10 KiB
Vue
<template>
|
|
<div class="big-screen-container">
|
|
<header class="screen-header">
|
|
<div class="title-center">
|
|
<h1 class="main-title">{{ screenTitle }}</h1>
|
|
</div>
|
|
<div class="tabs-container">
|
|
<div class="tabs-left">
|
|
<div
|
|
class="tab-item"
|
|
:class="{ active: isHome }"
|
|
@click="goHome"
|
|
>
|
|
<span>首页</span>
|
|
</div>
|
|
<div
|
|
class="tab-item"
|
|
v-for="item in allTabs"
|
|
:key="item.moduleCode"
|
|
:class="{ active: isCurrentTab(item.path) }"
|
|
@click="switchTabByRoute(item)"
|
|
>
|
|
<span>{{ item.moduleName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="query-group">
|
|
<el-date-picker
|
|
type="year"
|
|
v-model="queryDate"
|
|
popper-class="dark-date-popper"
|
|
value-format="YYYY"
|
|
></el-date-picker>
|
|
<button class="query-btn" @click="handleQuery">查询</button>
|
|
<img src="@/assets/images/setting.png" class="setting-btn" @click="handleSetting" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="screen-content">
|
|
<div v-if="isHome" class="screen-page">
|
|
<HomePage />
|
|
</div>
|
|
<router-view v-else v-slot="{ Component }">
|
|
<div class="screen-page" v-if="Component">
|
|
<component :is="Component" />
|
|
</div>
|
|
</router-view>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
|
import { getHomeModuleList } from '@/api/bizApi'
|
|
import HomePage from './Home/index.vue'
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const HOME_TITLE = "个人数字化分析看板";
|
|
const screenTitle = ref(HOME_TITLE);
|
|
const currentYear = new Date().getFullYear().toString();
|
|
|
|
const allTabs = ref([])
|
|
const queryDate = ref(currentYear);
|
|
|
|
const getTitle = (title) => {
|
|
screenTitle.value = title;
|
|
};
|
|
|
|
const isHome = computed(() => {
|
|
return route.path === '/bigScreen' || route.path === '/';
|
|
});
|
|
|
|
const goHome = () => {
|
|
screenTitle.value = HOME_TITLE;
|
|
router.push('/bigScreen').catch(() => {});
|
|
};
|
|
|
|
const isCurrentTab = (routePath) => {
|
|
return route.path === routePath;
|
|
};
|
|
|
|
const switchTabByRoute = (item) => {
|
|
getTitle(item.titleName);
|
|
if (!item.path) {
|
|
ElMessage.warning('该模块暂无对应路由');
|
|
return;
|
|
}
|
|
router.push({
|
|
path: item.path,
|
|
query: {
|
|
year: queryDate.value,
|
|
...route.query
|
|
}
|
|
}).catch(err => {
|
|
ElMessage.error('页面切换失败，请重试');
|
|
});
|
|
};
|
|
|
|
const handleQuery = () => {
|
|
if (!queryDate.value) {
|
|
ElMessage.warning('请选择查询年份');
|
|
return;
|
|
}
|
|
router.push({
|
|
path: route.path,
|
|
query: {
|
|
...route.query,
|
|
year: queryDate.value
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSetting = () => {
|
|
router.push('/screen/Setting/index');
|
|
};
|
|
|
|
async function getList() {
|
|
try {
|
|
const res = await getHomeModuleList();
|
|
allTabs.value = res || [];
|
|
} catch (error) {
|
|
console.error('获取模块列表失败：', error);
|
|
allTabs.value = [];
|
|
}
|
|
}
|
|
|
|
const initApp = () => {
|
|
getList();
|
|
};
|
|
|
|
onMounted(() => {
|
|
initApp();
|
|
router.afterEach((to) => {
|
|
if (to.query.year) {
|
|
queryDate.value = to.query.year;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: "pangshizidao";
|
|
src: url("@/assets/font/pangshizidao.ttf") format("truetype");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.dark-date-popper {
|
|
z-index: 9999 !important;
|
|
background-color: #0f3460 !important;
|
|
border: 1px solid #1a508b !important;
|
|
}
|
|
.dark-date-popper .el-picker-panel,
|
|
.dark-date-popper .el-date-range-picker,
|
|
.dark-date-popper .el-date-range-picker__header,
|
|
.dark-date-popper .el-date-table,
|
|
.dark-date-popper .el-date-table th,
|
|
.dark-date-popper .el-date-table td {
|
|
background-color: #0f3460 !important;
|
|
color: #e0e6ff !important;
|
|
border-color: #1a508b !important;
|
|
}
|
|
.dark-date-popper .el-date-range-picker__content .el-date-range-picker__header {
|
|
background-color: #154580 !important;
|
|
}
|
|
.dark-date-popper .el-date-range-picker__content {
|
|
background-color: #0f3460 !important;
|
|
}
|
|
.dark-date-popper .el-date-table td.current,
|
|
.dark-date-popper .el-date-table td.start-date,
|
|
.dark-date-popper .el-date-table td.end-date {
|
|
background-color: #3c9cff !important;
|
|
color: #fff !important;
|
|
}
|
|
.dark-date-popper .el-date-table td.in-range {
|
|
background-color: rgba(60, 156, 255, 0.25) !important;
|
|
color: #e0e6ff !important;
|
|
}
|
|
.dark-date-popper .el-date-table-cell {
|
|
background-color: transparent !important;
|
|
}
|
|
.dark-date-popper .el-date-table-cell::before,
|
|
.dark-date-popper .el-date-table-cell::after {
|
|
background-color: transparent !important;
|
|
opacity: 0 !important;
|
|
}
|
|
.dark-date-popper .el-date-table td.in-range .el-date-table-cell::before {
|
|
background-color: rgba(60, 156, 255, 0.25) !important;
|
|
}
|
|
|
|
.dark-message-box {
|
|
background-color: #0f3460 !important;
|
|
border: 1px solid #1a508b !important;
|
|
}
|
|
.dark-message-box .el-message-box__header,
|
|
.dark-message-box .el-message-box__content {
|
|
background-color: #0f3460 !important;
|
|
color: #e0e6ff !important;
|
|
}
|
|
.dark-message-box .el-message-box__title {
|
|
color: #e0e6ff !important;
|
|
}
|
|
.confirm-btn {
|
|
background: linear-gradient(90deg, #1a508b, #3c9cff) !important;
|
|
border: 1px solid #1a508b !important;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.big-screen-container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background-color: #0a1929;
|
|
background-image: inherit;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
.big-screen-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 52, 96, 0.85);
|
|
z-index: 1;
|
|
}
|
|
|
|
.screen-header {
|
|
height: 75px;
|
|
padding: 0 2vw;
|
|
border-bottom: 1px solid #1a508b;
|
|
background: url('@/assets/chart/top/33.png') no-repeat center center,
|
|
linear-gradient(90deg, rgba(15, 52, 96, 0.8), rgba(21, 69, 128, 0.8));
|
|
background-size: cover;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.title-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 9999 !important;
|
|
padding: 4px 20px;
|
|
border-radius: 8px;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 32px;
|
|
font-weight: normal;
|
|
background: #ffffff;
|
|
font-family: "pangshizidao";
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
white-space: nowrap;
|
|
z-index: 9999 !important;
|
|
letter-spacing: 6px;
|
|
position: relative;
|
|
}
|
|
|
|
.tabs-container {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 0 2vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 10;
|
|
height: 40px;
|
|
}
|
|
|
|
.tabs-left {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.tab-item {
|
|
height: 36px;
|
|
line-height: 36px;
|
|
padding: 0 20px;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: url('@/assets/images/button1.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
color: #e0e6ff;
|
|
text-align: center;
|
|
border: none !important;
|
|
}
|
|
|
|
.tab-item:hover {
|
|
background: url('@/assets/images/button1.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-item.active {
|
|
background: url('@/assets/images/button2.png') no-repeat center center;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.4);
|
|
border: none !important;
|
|
}
|
|
|
|
.query-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
height: 100%;
|
|
}
|
|
|
|
:deep(.el-input),
|
|
:deep(.el-input__wrapper),
|
|
:deep(.el-input__inner) {
|
|
background-color: #0f3460 !important;
|
|
color: #e0e6ff !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
:deep(.el-input.is-focus .el-input__wrapper) {
|
|
box-shadow: 0 0 0 1px #3c9cff inset !important;
|
|
}
|
|
|
|
:deep(.el-date-editor .el-range-input) {
|
|
color: #e0e6ff !important;
|
|
}
|
|
|
|
:deep(.el-date-editor .el-range-separator) {
|
|
color: #e0e6ff !important;
|
|
margin-bottom: 5px !important;
|
|
}
|
|
|
|
.query-btn {
|
|
height: 36px;
|
|
padding: 0 20px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(90deg, #1a508b, #3c9cff);
|
|
border: 1px solid #1a508b;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.query-btn:hover {
|
|
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.6);
|
|
background: linear-gradient(90deg, #154580, #2b8ed8);
|
|
}
|
|
|
|
.setting-btn {
|
|
height: 36px;
|
|
width: 36px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(90deg, #1a508b, #3c9cff);
|
|
border: 1px solid #1a508b;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.setting-btn:hover {
|
|
box-shadow: 0 2px 8px rgba(60, 156, 255, 0.6);
|
|
background: linear-gradient(90deg, #154580, #2b8ed8);
|
|
}
|
|
|
|
.screen-content {
|
|
flex: 1;
|
|
padding: 1px;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
height: calc(100vh - 75px);
|
|
background-image: url('@/assets/images/bg.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.screen-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
background: transparent;
|
|
border: 1px solid rgba(26, 80, 139, 0.3);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.empty-page {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #e0e6ff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
@media (max-width: 1600px) {
|
|
.main-title {
|
|
font-size: 24px;
|
|
letter-spacing: 4px;
|
|
}
|
|
.tab-item {
|
|
padding: 0 18px;
|
|
font-size: 14px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
.query-btn, .setting-btn {
|
|
height: 32px;
|
|
font-size: 14px;
|
|
padding: 0 18px;
|
|
}
|
|
.setting-btn {
|
|
width: 32px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 900px) {
|
|
.screen-header {
|
|
height: 65px;
|
|
}
|
|
.tabs-container {
|
|
height: 36px;
|
|
}
|
|
.tab-item {
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
.query-btn, .setting-btn {
|
|
height: 32px;
|
|
}
|
|
.setting-btn {
|
|
width: 32px;
|
|
}
|
|
.screen-content {
|
|
padding: 10px;
|
|
height: calc(100vh - 65px);
|
|
}
|
|
}
|
|
</style> |