feat：新增左右两侧和顶部功能组件

src/components/Header/index.vue

@@ -14,7 +14,7 @@
       </li>
     </ul>
     <div class="title">
-      <span>{{ name }}</span>
+      <span>{{ title }}</span>
     </div>
     <ul class="nav-right">
       <li
@@ -47,47 +47,26 @@
 
   import { getWeatherApi } from '@/api/home'
 
-  let props = defineProps({
-    title: {
-      type: String,
-      default: ''
-    },
-    navLeft: {
-      type: Array,
-      default: () => []
-    },
-    navRight: {
-      type: Array,
-      default: () => []
-    },
-    current: {
-      type: Number,
-      default: 0
-    },
-    isSkip: {
-      type: Boolean,
-      default: false
-    },
-    isBack: {
-      type: Boolean,
-      default: false
-    }
-  })
   const emit = defineEmits(['change'])
+
   const router = useRouter()
+  const currentRoute = router.currentRoute.value
+
   let currentDate = ref('')
   let weatherData = ref({})
+  let title = ref('')
+  let navLeft = ref([])
+  let navRight = ref([])
+  let isSkip = ref(true)
+  let isBack = ref(false)
+  let current = ref(0)
 
-  const name = computed(() => {
+  // 补零
-    if (!props.isSkip && props.navLeft.length > 0) {
-      return props.navLeft[props.current].name
-    }
-    return props.title
-  })
-
   const fillZero = (value) => {
     return value < 10 ? `0${value}` : value
   }
+
+  // 获取当前日期
   const getCurrentDate = () => {
     var time = new Date()
     var year = time.getFullYear()
@@ -101,21 +80,117 @@
       minute
     )}:${fillZero(second)}`
   }
+
+  // 返回上一页
   const handleBack = () => {
     router.go(-1)
   }
+
+  // 点击导航
   const handleNav = (item, index) => {
-    if (props.isSkip) {
+    if (isSkip.value) {
       router.push(item.path)
     } else {
       emit('on-change', index)
     }
   }
+
+  // 获取天气数据
   const getWeather = async () => {
     let res = await getWeatherApi()
     weatherData.value = res.data
-    console.log(res, '====')
   }
+
+  // 设置当前路由导航栏
+  const setNav = () => {
+    switch (router.currentRoute.value.path) {
+      case '/home':
+        title.value = '奉节县旅游指挥调度中心'
+        navLeft.value = [
+          { name: '安全', path: '/monitor' },
+          { name: '景区', path: '/scenic' },
+          { name: '交通', path: '/traffic' }
+        ]
+        navRight.value = [
+          { name: '停车' },
+          { name: '工单', path: '/workOrder' },
+          { name: '舆情', path: '/sentiment' },
+          { name: '酒店' }
+        ]
+        break
+      case '/scenic':
+        title.value = '景区'
+        navLeft.value = []
+        navRight.value = []
+        isBack.value = true
+        break
+      case '/sentiment':
+        title.value = '舆情检测'
+        navLeft.value = []
+        navRight.value = []
+        isBack.value = true
+        break
+      case '/workOrder':
+        title.value = '工单消息'
+        navLeft.value = []
+        navRight.value = []
+        isBack.value = true
+        break
+      case '/traffic':
+        title.value = '交通大屏'
+        navLeft.value = []
+        navRight.value = []
+        isBack.value = true
+        break
+      case '/monitor':
+        title.value = '监控大屏'
+        navLeft.value = [
+          {
+            name: '奉节县',
+            path: '/sceneTesting'
+          },
+          {
+            name: '三峡之巅',
+            path: '/sceneTesting'
+          },
+          {
+            name: '白帝城',
+            path: '/sceneTesting'
+          },
+          {
+            name: '龙河桥',
+            path: '/sceneTesting'
+          }
+        ]
+        navRight.value = [
+          {
+            name: '路段',
+            path: '/roadTesting'
+          },
+          {
+            name: '路段',
+            path: '/roadTesting'
+          },
+          {
+            name: '路段',
+            path: '/roadTesting'
+          },
+          {
+            name: '路段',
+            path: '/roadTesting'
+          }
+        ]
+        isBack.value = true
+        break
+    }
+  }
+  watch(
+    () => router.currentRoute.value,
+    () => {
+      setNav()
+    },
+    { immediate: true }
+  )
   onMounted(() => {
     getWeather()
     getCurrentDate()

src/layout/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <Header />
+  <div class="flex flex-1">
+    <CoreVideo />
+    <div class="mian"><RouterView /></div>
+    <Correspondence />
+  </div>
+</template>
+
+<script setup>
+  import { RouterView } from 'vue-router'
+  let props = defineProps({
+    title: {
+      type: String,
+      default: '奉节县旅游指挥调度中心'
+    },
+    isBack: {
+      type: Boolean,
+      default: false
+    },
+    navLeft: {
+      type: Array,
+      default: () => []
+    },
+    navRight: {
+      type: Array,
+      default: () => []
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  .mian {
+    flex: 1;
+    display: flex;
+  }
+</style>

src/router/index.js

@@ -1,18 +1,50 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import NotFound from '@/views/404/index.vue'
+import Layout from '@/layout/index.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      component: Layout,
-      component: () => import('@/views/home/index.vue')
+      redirect: '/home',
-    },
+      props(route) {
-    {
+        return route.query
-      path: '/monitor',
+      },
-      name: 'monitor',
+      children: [
-      component: () => import('@/views/monitor/index.vue')
+        {
+          path: 'home',
+          name: 'home',
+          meta: { title: '奉节县旅游指挥调度中心' },
+          component: () => import('@/views/home/index.vue')
+        },
+        {
+          path: '/monitor',
+          name: 'monitor',
+          component: () => import('@/views/monitor/index.vue')
+        },
+        {
+          path: '/scenic',
+          name: 'scenic',
+          component: () => import('@/views/scenic/index.vue')
+        },
+        {
+          path: 'sentiment',
+          name: 'sentiment',
+          component: () => import('@/views/sentiment/index.vue')
+        },
+        {
+          path: '/workOrder',
+          name: 'workOrder',
+          component: () => import('@/views/workOrder/index.vue')
+        },
+        {
+          path: '/traffic',
+          name: 'traffic',
+          component: () => import('@/views/traffic/index.vue')
+        }
+      ]
     },
     {
       path: '/sceneTesting',
@@ -24,26 +56,6 @@ const router = createRouter({
       name: 'roadTesting',
       component: () => import('@/views/testing/road.vue')
     },
-    {
-      path: '/scenic',
-      name: 'scenic',
-      component: () => import('@/views/scenic/index.vue')
-    },
-    {
-      path: '/traffic',
-      name: 'traffic',
-      component: () => import('@/views/traffic/index.vue')
-    },
-    {
-      path: '/sentiment',
-      name: 'sentiment',
-      component: () => import('@/views/sentiment/index.vue')
-    },
-    {
-      path: '/workOrder',
-      name: 'workOrder',
-      component: () => import('@/views/workOrder/index.vue')
-    },
     {
       path: '/404',
       name: 'NotFound',

src/views/home/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
+  <!-- <Header title="奉节县旅游指挥调度中心" is-skip :nav-left="navLeft" :nav-right="navRight" />
-  <CoreVideo />
+  <CoreVideo /> -->
   <box1 :data="data" />
   <box2 />
   <box3 />
-  <Correspondence />
+  <!-- <Correspondence /> -->
 </template>
 
 <script setup>

src/views/monitor/index.vue

@@ -1,58 +1,11 @@
 <template>
-	<main class="wrapper">
+  <box2 />
-		<CoreVideo />
+  <box3 />
-		<box2 />
-		<box3 />
-		<Header title="监控大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
-		<Correspondence />
-	</main>
 </template>
 
 <script setup>
-	import box3 from './components/box-3.vue'
+  import box3 from './components/box-3.vue'
-	import box2 from './components/box-2.vue'
+  import box2 from './components/box-2.vue'
-	const navLeft = [{
-			name: '奉节县',
-			path: '/sceneTesting'
-		},
-		{
-			name: '三峡之巅',
-			path: '/sceneTesting'
-		},
-		{
-			name: '白帝城',
-			path: '/sceneTesting'
-		}, {
-			name: '龙河桥',
-			path: '/sceneTesting'
-		}
-	]
-	const navRight = [{
-			name: '路段',
-			path: '/roadTesting'
-		},
-		{
-			name: '路段',
-			path: '/roadTesting'
-		},
-		{
-			name: '路段',
-			path: '/roadTesting'
-		},
-		{
-			name: '路段',
-			path: '/roadTesting'
-		}
-	]
-	onMounted(() => {})
-</script>
 
-<style lang="scss" scoped>
+  onMounted(() => {})
-	.wrapper {
+</script>
-		display: flex;
-		width: 100vw;
-		height: 100vh;
-		overflow: hidden;
-		background-color: #0a254b;
-	}
-</style>

src/views/scenic/index.vue

@@ -1,21 +1,11 @@
 <template>
-  <Header is-back :current="current" :nav-left="navLeft" @on-change="onChange" />
-  <CoreVideo />
   <box1 />
   <box2 />
-  <Correspondence />
 </template>
 
 <script setup>
   import box1 from './components/box-1.vue'
   import box2 from './components/box-2.vue'
-
-  const navLeft = [{ name: '奉节县' }, { name: '龙桥河' }, { name: '山峡之巅' }]
-  let current = ref(0)
-
-  const onChange = (e) => {
-    current.value = e
-  }
 </script>
 
 <style scoped lang="scss"></style>

src/views/sentiment/index.vue

@@ -1,6 +1,4 @@
 <template>
-  <Header title="舆情检测" is-back />
-  <CoreVideo />
   <div class="container">
     <div class="flex">
       <div class="box-1 mr-10">
@@ -66,7 +64,6 @@
       </div>
     </div>
   </div>
-  <Correspondence />
 </template>
 
 <script setup>

src/views/traffic/index.vue

@@ -1,19 +1,11 @@
 <template>
-	<main class="wrapper">
+  <box1 />
-		<CoreVideo />
+  <box2 />
-		<box1/>
+  <box3 />
-		<box2/>
-		<box3/>
-		<Header title="交通大屏" is-skip :nav-left="navLeft" :nav-right="navRight" />
-		<Correspondence />
-	</main>
 </template>
 
 <script setup>
-	import box1 from './components/box-1.vue'
+  import box1 from './components/box-1.vue'
-	import box2 from './components/box-2.vue'
+  import box2 from './components/box-2.vue'
-	import box3 from './components/box-3.vue'
+  import box3 from './components/box-3.vue'
 </script>
-
-<style>
-</style>

src/views/workOrder/index.vue

@@ -1,10 +1,7 @@
 <template>
-  <Header title="工单消息" is-skip is-back />
-  <CoreVideo />
   <box1 />
   <box2 />
   <box3 />
-  <Correspondence />
 </template>
 
 <script setup>