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()