第四十六节：顶部【驾驶舱】独立大屏页面实现

第四十六节：顶部【驾驶舱】独立大屏页面实现

🎯本节目标

1. 在 HeaderView.vue 顶部导航栏增加【驾驶舱】按钮（截图红框位置）
2. 驾驶舱是独立全屏页面，不嵌套 Layout 布局（没有侧边栏、顶部标签、面包屑）
3. 点击按钮新开浏览器标签页进入大屏驾驶舱，不占用当前后台标签页
4. 驾驶舱页面开发：大屏数据看板，ECharts 图表展示统计数据

关键点：路由区分，Layout 嵌套页面 和 独立全屏页面路由配置不一样

步骤 1：新增驾驶舱路由（独立路由，不带 Layout）

src/router/index.js

const routes = [
  // 原有布局路由，都嵌套 Layout
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard/index',
    children: [
      // ...你现有的工作台、用户管理、资讯等路由
    ]
  },
  // ✅驾驶舱：独立全屏页面，不套Layout
  {
    path: '/cockpit',
    name: 'Cockpit',
    component: () => import('@/views/cockpit/index.vue'),
    meta: { title: '驾驶舱大屏' }
  }
]

步骤 2：HeaderView.vue 添加【驾驶舱】按钮

文件：src/layout/components/HeaderView.vue

在搜索框右侧，通知铃铛前面添加按钮

<template>
<div class="header-wrap">
  <!-- 左侧logo -->
  <div class="logo">数字智能管理平台</div>
  <!-- 搜索框 -->
  <el-input placeholder="请输入搜索内容" />

  <!-- ==========新增驾驶舱按钮========== -->
  <el-button @click="openCockpit">驾驶舱</el-button>

  <!-- 通知铃铛、用户头像 -->
  <el-badge :value="3">
    <el-icon><Bell /></el-icon>
  </el-badge>
  <div class="admin">admin</div>
</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 新开标签页打开独立驾驶舱
const openCockpit = () => {
    //方式一 不新开浏览器
    //router.push('/cockpit')
    //方式二 新开浏览器
    // // resolve 获取路由完整url，window.open新标签打开
    const { href } = router.resolve({ path: '/cockpit' })
    // //`window.open` 新开浏览器 tab，**不会增加 TagsView 标签页**，完全独立页面。
    window.open(href, '_blank')
}
</script>

原理：window.open 新开浏览器 tab，不会增加 TagsView 标签页，完全独立页面。

步骤 3：新建驾驶舱页面 src/views/cockpit/index.vue

<template>
  <div class="cockpit-wrap">
    <h1>驾驶舱 - 数据大屏</h1>
    <!-- 这里后续放ECharts图表、统计卡片 -->
    <div class="chart-box">数据图表区域</div>
  </div>
</template>

<script setup>
// 大屏页面，不需要layout、菜单、tagsView
</script>

<style scoped>
.cockpit-wrap {
  width: 100vw;
  height: 100vh;
  background: #091b39;
  color: #fff;
  padding: 20px;
}
</style>

步骤 4：Mock 接口 大屏统计数据

src/mock/index.js

// 大屏驾驶舱统计接口
'/cockpit/getStat' : () => {
  return {
    code:200,
    data:{
      userTotal: 1256,
      newsTotal: 89,
      deptTotal:12,
      onlineUser:36
    }
  }
}

✅测试清单

1. 刷新后台，顶部出现【驾驶舱】按钮 ✔
2. 点击按钮，打开全新浏览器标签页，页面没有侧边栏、标签栏 ✔
3. 原管理后台页面不受影响，TagsView 不会新增驾驶舱标签 ✔
4. 驾驶舱页面可以自由开发大屏样式，全屏展示

拓展可选：如果你不想新开标签，而是当前页面跳转，直接写 router.push('/cockpit')，但是会离开后台管理页面。

🎯需求：当前页面直接跳转驾驶舱，不新开浏览器标签

注意：这种写法会离开管理后台布局，直接全屏展示驾驶舱。

因为 /cockpit 路由本身没有嵌套 Layout，所以跳转过去侧边栏、tagsView、头部全部消失，变成独立大屏。

1. 修改 HeaderView.vue 点击事件

原来的 window.open 删掉，改用 router.push

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

// 当前页面直接跳转驾驶舱
const goCockpit = () => {
  router.push('/cockpit')
}
</script>

<template>
  <el-button @click="goCockpit">驾驶舱</el-button>
</template>

2. 增加【返回后台】按钮（驾驶舱页面 cockpit.vue）

跳转到大屏后，需要能切回管理后台，在驾驶舱页面加返回按钮：

<template>
  <div class="cockpit-wrap">
    <!-- 返回后台按钮 -->
    <el-button class="back-btn" @click="backAdmin">返回管理后台</el-button>
    <h1>驾驶舱 - 数据大屏</h1>
    <div class="chart-box">图表区域</div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 返回后台首页
const backAdmin = () => {
  router.push('/dashboard/dashboard')
}
</script>

⚠️ 重要配套：路由 afterEach 已经做好过滤（之前改好的）

router.afterEach((to) => {
  const tagsViewStore = useTagsViewStore()
  // 驾驶舱不添加tags标签
  if (to.meta.title && to.path !== '/cockpit') {
    tagsViewStore.addView(to)
  }
})

👉 效果：跳转到驾驶舱，顶部标签栏不会新增驾驶舱标签，符合预期。

✅两种方案对比

表格

方案	代码	特点
新标签页	window.open(href, '_blank')	后台页面保留，大屏单独 tab，推荐大屏场景
当前页跳转	router.push('/cockpit')	直接覆盖当前页面，大屏全屏；需要手动加返回按钮

🧪测试清单

1. 点击【驾驶舱】，当前页面切换到大屏，没有侧边栏、标签栏
2. 标签栏不会新增驾驶舱 tag
3. 点击大屏里【返回管理后台】，切回工作台页面
4. 后台原有标签、菜单功能正常