fix(web): 修复页面切换导致检测过程中断的问题
This commit is contained in:
299
apps/web/src/layouts/MainLayout.vue
Normal file
299
apps/web/src/layouts/MainLayout.vue
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<el-container class="layout-root">
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<el-aside class="layout-aside" :width="collapsed ? '64px' : '220px'">
|
||||||
|
<div class="logo-area" @click="$router.push('/')">
|
||||||
|
<div class="logo-icon">
|
||||||
|
<el-icon :size="22"><VideoCameraFilled /></el-icon>
|
||||||
|
</div>
|
||||||
|
<span v-if="!collapsed" class="logo-text">视频检测</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-menu
|
||||||
|
:default-active="activeRoute"
|
||||||
|
:collapse="collapsed"
|
||||||
|
:collapse-transition="false"
|
||||||
|
background-color="#0F172A"
|
||||||
|
text-color="#94A3B8"
|
||||||
|
active-text-color="#22C55E"
|
||||||
|
router
|
||||||
|
>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="item in menuItems"
|
||||||
|
:key="item.path"
|
||||||
|
:index="item.path"
|
||||||
|
>
|
||||||
|
<el-icon><component :is="item.icon" /></el-icon>
|
||||||
|
<template #title>{{ item.title }}</template>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
|
||||||
|
<el-container>
|
||||||
|
<!-- 顶部 -->
|
||||||
|
<el-header class="layout-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<el-button
|
||||||
|
text
|
||||||
|
class="collapse-btn"
|
||||||
|
@click="collapsed = !collapsed"
|
||||||
|
:aria-label="collapsed ? '展开侧边栏' : '收起侧边栏'"
|
||||||
|
>
|
||||||
|
<el-icon :size="20">
|
||||||
|
<Fold v-if="!collapsed" />
|
||||||
|
<Expand v-else />
|
||||||
|
</el-icon>
|
||||||
|
</el-button>
|
||||||
|
<h1 class="title">{{ currentTitle }}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-right">
|
||||||
|
<!-- 实时连接状态 -->
|
||||||
|
<div class="connection-badge" :class="alertStore.statusClass">
|
||||||
|
<span class="dot"></span>
|
||||||
|
<span class="label">{{ alertStore.statusLabel }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 预警铃铛 -->
|
||||||
|
<el-badge
|
||||||
|
:value="alertStore.unreadCount"
|
||||||
|
:hidden="alertStore.unreadCount === 0"
|
||||||
|
:max="99"
|
||||||
|
class="bell-badge"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
text
|
||||||
|
class="bell-btn"
|
||||||
|
@click="$router.push('/alerts')"
|
||||||
|
aria-label="查看预警列表"
|
||||||
|
>
|
||||||
|
<el-icon :size="20"><Bell /></el-icon>
|
||||||
|
</el-button>
|
||||||
|
</el-badge>
|
||||||
|
|
||||||
|
<el-tag type="success" effect="dark" round size="small">运行中</el-tag>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
|
||||||
|
<!-- 路由出口 -->
|
||||||
|
<el-main class="layout-main">
|
||||||
|
<router-view v-slot="{ Component, route: viewRoute }">
|
||||||
|
<keep-alive>
|
||||||
|
<component :is="Component" v-if="viewRoute.meta.keepAlive" :key="viewRoute.name" />
|
||||||
|
</keep-alive>
|
||||||
|
<component :is="Component" v-if="!viewRoute.meta.keepAlive" :key="viewRoute.name" />
|
||||||
|
</router-view>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
<!-- 全局预警弹窗 -->
|
||||||
|
<AlertNotification />
|
||||||
|
</el-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import {
|
||||||
|
VideoCameraFilled,
|
||||||
|
WarningFilled,
|
||||||
|
Bell,
|
||||||
|
Fold,
|
||||||
|
Expand
|
||||||
|
} from '@element-plus/icons-vue'
|
||||||
|
import { useAlertStore } from '@/stores/alertStore'
|
||||||
|
import { connectAlertSocket, disconnectAlertSocket } from '@/services/mqtt.client'
|
||||||
|
import AlertNotification from '@/components/AlertNotification.vue'
|
||||||
|
|
||||||
|
const collapsed = ref(false)
|
||||||
|
const route = useRoute()
|
||||||
|
const alertStore = useAlertStore()
|
||||||
|
|
||||||
|
const menuItems = [
|
||||||
|
{ path: '/', title: '模型检测', icon: VideoCameraFilled },
|
||||||
|
{ path: '/alerts', title: '预警列表', icon: WarningFilled }
|
||||||
|
]
|
||||||
|
|
||||||
|
const activeRoute = computed(() => route.path)
|
||||||
|
const currentTitle = computed(() => {
|
||||||
|
const item = menuItems.find((m) => m.path === route.path)
|
||||||
|
return item ? item.title : '视频模型检测平台'
|
||||||
|
})
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
connectAlertSocket()
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
disconnectAlertSocket()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.layout-root {
|
||||||
|
height: 100vh;
|
||||||
|
background: #020617;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-aside {
|
||||||
|
background: #0F172A;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
transition: width 200ms ease;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 18px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
|
||||||
|
color: #0F172A;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #F8FAFC;
|
||||||
|
letter-spacing: -0.3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-menu) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-menu-item) {
|
||||||
|
height: 48px;
|
||||||
|
margin: 4px 8px;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: background 150ms ease, color 150ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-menu-item:hover) {
|
||||||
|
background: rgba(34, 197, 94, 0.08) !important;
|
||||||
|
color: #F8FAFC !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-menu-item.is-active) {
|
||||||
|
background: rgba(34, 197, 94, 0.15) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-header {
|
||||||
|
background: #0F172A;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-btn {
|
||||||
|
color: #94A3B8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-btn:hover {
|
||||||
|
color: #22C55E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #F8FAFC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge .dot {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #64748B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.connected .dot {
|
||||||
|
background: #22C55E;
|
||||||
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.connected .label {
|
||||||
|
color: #22C55E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.connecting .dot {
|
||||||
|
background: #F59E0B;
|
||||||
|
animation: pulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.connecting .label {
|
||||||
|
color: #F59E0B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.disconnected .dot {
|
||||||
|
background: #EF4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.connection-badge.disconnected .label {
|
||||||
|
color: #EF4444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-badge {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-btn {
|
||||||
|
color: #94A3B8;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bell-btn:hover {
|
||||||
|
color: #22C55E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-main {
|
||||||
|
background: #020617;
|
||||||
|
padding: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user