<template>
|
<div class="index">
|
<el-container direction="vertical">
|
<!-- 左侧导航栏 -->
|
<el-aside class="modern-sidebar asideL">
|
<div class="sidebar-header">
|
<div class="system-logo">
|
<i class="el-icon-monitor"></i>
|
<span class="system-name">{{ $t('aside.systemname') }}</span>
|
</div>
|
</div>
|
|
<el-menu v-if="num == 1" router unique-opened :default-active="activeIndex" class="modern-menu">
|
<el-menu-item class="modern-menu-item" :index="item.path" v-for="item in filteredMenu" :key="item.name"
|
@click="changeItem(item)">
|
<i :class="getMenuIcon(item.path)" class="menu-icon"></i>
|
<span class="menu-title">{{ item.name }}</span>
|
<div class="menu-indicator"></div>
|
</el-menu-item>
|
</el-menu>
|
|
<el-menu v-if="num == 2" router unique-opened :default-active="activeIndex2" class="modern-menu">
|
<el-menu-item class="modern-menu-item" :index="item.path" v-for="item in personMenuList" :key="item.name"
|
@click="changeItem(item)">
|
<i :class="getMenuIcon(item.path)" class="menu-icon"></i>
|
<span class="menu-title">{{ item.name }}</span>
|
<div class="menu-indicator"></div>
|
</el-menu-item>
|
</el-menu>
|
</el-aside>
|
|
<el-container class="asideR">
|
<!-- 头部导航栏 -->
|
<el-header class="modern-header rightTop">
|
<div class="header-left">
|
<div class="page-title">
|
<span>{{ getCurrentPageTitle() }}</span>
|
</div>
|
</div>
|
|
<div class="header-right">
|
<!-- <div class="lang-box">
|
<el-select v-model="language" size="mini" @change="changeLang">
|
<el-option :label="$t('common.chinese')" value="zh"></el-option>
|
<el-option :label="$t('common.english')" value="en"></el-option>
|
<el-option :label="$t('common.spanish')" value="es"></el-option>
|
<el-option :label="$t('common.french')" value="fr"></el-option>
|
<el-option :label="$t('common.german')" value="de"></el-option>
|
<el-option :label="$t('common.russian')" value="ru"></el-option>
|
<el-option :label="$t('common.arabic')" value="ar"></el-option>
|
<el-option :label="$t('common.portuguese')" value="pt"></el-option>
|
<el-option :label="$t('common.korean')" value="ko"></el-option>
|
</el-select>
|
</div> -->
|
<div class="header-actions">
|
<el-button class="logout-btn" type="text" @click="logout">
|
<i class="el-icon-switch-button"></i>
|
{{ $t('aside.quit') }}
|
</el-button>
|
</div>
|
</div>
|
</el-header>
|
|
<!-- 主体部分 -->
|
<el-main class="modern-main pagemain">
|
<router-view></router-view>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "Home",
|
computed: {
|
// 计算属性过滤菜单
|
filteredMenu() {
|
let publicConfig = sessionStorage.getItem('publicConfig')
|
let { model } = publicConfig ? JSON.parse(publicConfig) : {}
|
return this.systemMenuList.filter(item => {
|
// 检查型号
|
if (item.allowedModels && !item.allowedModels.includes(model)) {
|
return false
|
}
|
return true
|
})
|
}
|
},
|
data () {
|
return {
|
num: '',
|
systemMenuList: [
|
// {
|
// path: "/monitor",
|
// name: this.$t('aside.deviceMonitoring')
|
// },
|
{
|
path: "/config",
|
name: this.$t('aside.basicSetting')
|
},
|
{
|
path: "/control",
|
name: this.$t('aside.deviceControl')
|
},
|
{
|
path: "/person",
|
name: this.$t('aside.workerSetting')
|
},
|
{
|
path: "/record",
|
name: this.$t('aside.recordManagement')
|
},
|
{
|
path: "/security",
|
name: this.$t('aside.securityManagement'),
|
allowedModels: ['vf105', 'vf114']
|
}
|
],
|
activeIndex: "/",
|
activeIndex2: "/",
|
indexx: '/',
|
language: "zh"
|
};
|
},
|
// 检测路由变化
|
watch: {
|
$route () {
|
this.setCurrentRoute();
|
},
|
},
|
created () {
|
this.setCurrentRoute();
|
this.num = 1
|
},
|
mounted () {
|
document.getElementsByTagName('body')[0].style.setProperty('--themeColor', "#1890ff");
|
},
|
methods: {
|
// 获取菜单图标
|
getMenuIcon (path) {
|
const iconMap = {
|
// '/monitor': 'el-icon-video-camera',
|
'/config': 'el-icon-setting',
|
'/person': 'el-icon-user-solid',
|
'/control': 'el-icon-key',
|
'/record': 'el-icon-tickets',
|
'/security': 'el-icon-connection'
|
}
|
return iconMap[path] || 'el-icon-menu'
|
},
|
|
// 获取当前页面标题
|
getCurrentPageTitle () {
|
const titleMap = {
|
// '/monitor': this.$t('aside.deviceMonitoring'),
|
'/config': this.$t('aside.basicSetting'),
|
'/person': this.$t('aside.workerSetting'),
|
'/control': this.$t('aside.deviceControl'),
|
'/record': this.$t('aside.recordManagement'),
|
'/security': this.$t('aside.securityManagement'),
|
}
|
return titleMap[this.$route.path] || this.$t('aside.basicSetting')
|
},
|
|
changeItem (item) {
|
this.indexx = item.path
|
this.activeIndex = item.path
|
console.log(this.indexx);
|
},
|
|
setCurrentRoute () {
|
this.activeIndex = this.$route.path; // 通过他就可以监听到当前路由状态并激活当前菜单
|
this.activeIndex2 = this.$route.path;
|
this.indexx = this.$route.path;
|
},
|
|
// 退出登录
|
logout () {
|
const that = this
|
that.$confirm(this.$t('aside.tips_msg'), this.$t('aside.tips'), {
|
type: "warning"
|
}).then(async () => {
|
that.toDoLogout()
|
}).catch(() => {
|
return false
|
})
|
},
|
|
toDoLogout () {
|
this.$router.push('/login')
|
sessionStorage.removeItem("token")
|
sessionStorage.removeItem("publicConfig")
|
},
|
|
changeLang () {
|
this.$i18n.locale = this.language
|
sessionStorage.setItem('language', this.language)
|
this.systemMenuList = [
|
// {
|
// path: "/monitor",
|
// name: this.$t('aside.deviceMonitoring')
|
// },
|
{
|
path: "/config",
|
name: this.$t('aside.basicSetting')
|
},
|
{
|
path: "/control",
|
name: this.$t('aside.deviceControl')
|
},
|
{
|
path: "/person",
|
name: this.$t('aside.workerSetting')
|
},
|
{
|
path: "/record",
|
name: this.$t('aside.recordManagement')
|
},
|
{
|
path: "/security",
|
name: this.$t('aside.securityManagement'),
|
allowedModels: ['vf105', 'vf114']
|
}
|
]
|
}
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
@import '../../assets/styles/theme.css';
|
|
html,
|
#app,
|
body {
|
height: 100%;
|
}
|
|
.index {
|
height: 100vh;
|
background: var(--bg-secondary);
|
}
|
|
.el-container {
|
height: 100%;
|
}
|
|
/* 侧边栏样式 */
|
.asideL {
|
width: 260px !important;
|
height: 100%;
|
position: fixed;
|
left: 0;
|
background: linear-gradient(180deg, var(--bg-sidebar) 0%, #0c1426 100%);
|
box-shadow: var(--shadow-lg);
|
z-index: 1000;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
}
|
|
.sidebar-header {
|
padding: var(--spacing-lg);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
margin-bottom: var(--spacing-md);
|
}
|
|
.system-logo {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-md);
|
color: var(--text-white);
|
font-size: 18px;
|
font-weight: 600;
|
|
i {
|
font-size: 24px;
|
color: var(--primary-color);
|
}
|
}
|
|
.system-name {
|
font-size: 16px;
|
letter-spacing: 0.5px;
|
}
|
|
/* 菜单样式 */
|
.modern-menu {
|
background: transparent !important;
|
border: none !important;
|
padding: 0 var(--spacing-md);
|
}
|
|
.modern-menu-item {
|
height: 48px !important;
|
line-height: 48px !important;
|
margin-bottom: var(--spacing-xs) !important;
|
border-radius: var(--radius-md) !important;
|
color: rgba(255, 255, 255, 0.7) !important;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
position: relative !important;
|
overflow: hidden !important;
|
|
&:hover {
|
color: var(--text-white) !important;
|
background: rgba(255, 255, 255, 0.1) !important;
|
transform: translateX(4px);
|
}
|
|
&.is-active {
|
color: var(--text-white) !important;
|
background: var(--primary-color) !important;
|
box-shadow: var(--shadow-md);
|
|
.menu-indicator {
|
opacity: 1;
|
transform: scaleY(1);
|
}
|
}
|
}
|
|
.menu-icon {
|
font-size: 18px;
|
margin-right: var(--spacing-md);
|
width: 20px;
|
text-align: center;
|
}
|
|
.menu-title {
|
font-size: 14px;
|
font-weight: 500;
|
flex: 1;
|
}
|
|
.menu-indicator {
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translate(0, -50%) !important;
|
width: 3px;
|
height: 20px;
|
background: var(--text-white);
|
border-radius: 2px;
|
opacity: 0;
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
}
|
|
/* 主内容区域 */
|
.asideR {
|
margin-left: 260px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
/* 头部样式 */
|
.rightTop {
|
height: 64px !important;
|
padding: 0 var(--spacing-lg);
|
background: var(--bg-header);
|
border-bottom: 1px solid var(--border-light);
|
box-shadow: var(--shadow-sm);
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
z-index: 999;
|
}
|
|
.header-left {
|
flex: 1;
|
}
|
|
.page-title {
|
font-size: 20px;
|
font-weight: 600;
|
color: var(--text-primary);
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-sm);
|
|
&::before {
|
content: '';
|
width: 4px;
|
height: 20px;
|
background: var(--primary-color);
|
border-radius: 2px;
|
}
|
}
|
|
.header-right {
|
display: flex;
|
align-items: center;
|
}
|
|
.header-actions {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-lg);
|
}
|
|
.lang-selector {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-sm);
|
padding: var(--spacing-sm) var(--spacing-md);
|
border-radius: var(--radius-md);
|
color: var(--text-secondary);
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: var(--bg-tertiary);
|
color: var(--text-primary);
|
}
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
gap: var(--spacing-sm);
|
padding: var(--spacing-sm) var(--spacing-md);
|
border-radius: var(--radius-md);
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: var(--bg-tertiary);
|
}
|
}
|
|
.user-avatar {
|
border: 2px solid var(--border-light);
|
}
|
|
.user-name {
|
font-size: 14px;
|
color: var(--text-primary);
|
font-weight: 500;
|
}
|
|
.logout-btn {
|
color: var(--error-color) !important;
|
font-weight: 500;
|
padding: var(--spacing-sm) var(--spacing-md) !important;
|
border-radius: var(--radius-md) !important;
|
transition: all 0.3s ease !important;
|
|
&:hover {
|
background: rgba(255, 77, 79, 0.1) !important;
|
color: var(--error-color) !important;
|
}
|
}
|
|
/* 主内容区域 */
|
.modern-main {
|
flex: 1;
|
padding: var(--spacing-xs) !important;
|
background: var(--bg-secondary);
|
overflow: auto;
|
}
|
|
.pagemain {
|
height: calc(100vh - 64px) !important;
|
}
|
|
/* 响应式设计 */
|
@media (max-width: 768px) {
|
.asideL {
|
width: 240px !important;
|
transform: translateX(-100%);
|
|
&.mobile-open {
|
transform: translateX(0);
|
}
|
}
|
|
.asideR {
|
margin-left: 0;
|
}
|
|
.header-actions {
|
gap: var(--spacing-md);
|
}
|
|
.user-name {
|
display: none;
|
}
|
}
|
|
/* 动画效果 */
|
.fade-in-up {
|
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
}
|
|
@keyframes fadeInUp {
|
from {
|
opacity: 0;
|
transform: translateY(30px);
|
}
|
|
to {
|
opacity: 1;
|
transform: translateY(0);
|
}
|
}
|
|
/* Element UI 组件样式覆盖 */
|
/deep/ .el-menu {
|
border-right: none !important;
|
}
|
|
/deep/ .el-menu-item {
|
border-left: none !important;
|
}
|
|
/deep/ .el-dropdown-menu {
|
border-radius: var(--radius-md);
|
box-shadow: var(--shadow-lg);
|
border: 1px solid var(--border-light);
|
}
|
|
/deep/ .el-dropdown-menu__item {
|
padding: var(--spacing-sm) var(--spacing-md);
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: var(--bg-tertiary);
|
color: var(--primary-color);
|
}
|
}
|
|
/deep/ .el-tooltip__popper {
|
background: var(--bg-dark);
|
color: var(--text-white);
|
border-radius: var(--radius-md);
|
box-shadow: var(--shadow-lg);
|
}
|
</style>
|
