沅陵管理平台路由搭建

components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    RecursiveMenuItem: typeof import('./src/components/RecursiveMenuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/App.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import LayoutPage from '@/layout/LayoutPage.vue'
 </script>
 
 <template>
-  <LayoutPage />
+  <router-view />
 </template>
 
 <style scoped>

src/components/RecursiveMenuItem.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import * as ICON from '@element-plus/icons-vue'
+import type { RouterType } from '@/router/route'
+
+defineProps<{
+  item: RouterType
+}>()
+</script>
+
+<template>
+  <el-sub-menu v-if="item.children && item.children.length > 0" :index="'/'+item.path">
+    <template #title>
+      <el-icon v-if="item.icon">
+        <component :is="ICON[item.icon as keyof typeof ICON]" />
+      </el-icon>
+      <span>{{ item.name }}</span>
+    </template>
+    <recursive-menu-item
+      v-for="child in item.children"
+      :key="child.path"
+      :item="child"
+    />
+  </el-sub-menu>
+  <el-menu-item v-else :index="'/'+item.path">
+    <el-icon v-if="item.icon">
+      <component :is="ICON[item.icon as keyof typeof ICON]" />
+    </el-icon>
+    <span>{{ item.name }}</span>
+  </el-menu-item>
+</template>
+

src/layout/ContentArea.vue

@@ -6,7 +6,6 @@ import { RouterView } from 'vue-router'
 
 <template>
   <el-scrollbar>
-
     <RouterView />
   </el-scrollbar>
 </template>

src/layout/SiderArea.vue

@@ -1,75 +1,38 @@
 <script setup lang="ts">
-
-import { Document, Location, Setting } from '@element-plus/icons-vue'
-import { useCollapsedStore } from '@/stores/CollapsedStore.ts'
-import IconCommunity from '@/components/icons/IconCommunity.vue'
+import { ref } from 'vue'
+import RecursiveMenuItem from '@/components/RecursiveMenuItem.vue'
+import { useCollapsedStore } from '@/stores/CollapsedStore'
+import { buildTree, routeList } from '@/router/route'
+import { useRoute } from 'vue-router'
+const route = useRoute()
 
 const store = useCollapsedStore()
+const treeRoutes = ref(buildTree(routeList))
+const activeIndex = ref(route.fullPath)
 </script>
 
 <template>
-  <el-menu
-    default-active="2"
-    class="el-menu-vertical-demo"
-    :collapse="store.collapsed"
-  >
-    <el-sub-menu index="1">
-      <template #title>
-        <el-icon>
-          <Location />
-        </el-icon>
-        <span>智慧大屏管理</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="1-1">园区总览</el-menu-item>
-        <el-menu-item index="1-2">智慧安防</el-menu-item>
-        <el-menu-item index="1-3">智慧能耗</el-menu-item>
-        <el-menu-item index="1-4">智慧消防</el-menu-item>
-        <el-menu-item index="1-5">智慧灯杆</el-menu-item>
-        <el-menu-item index="1-6">智慧停车</el-menu-item>
-      </el-menu-item-group>
-    </el-sub-menu>
-
-    <el-sub-menu index="2">
-      <template #title>
-        <el-icon>
-          <Location />
-        </el-icon>
-        <span>智慧路灯</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="1-1">园区总览</el-menu-item>
-        <el-menu-item index="1-2">智慧安防</el-menu-item>
-        <el-menu-item index="1-3">智慧能耗</el-menu-item>
-        <el-menu-item index="1-4">智慧消防</el-menu-item>
-        <el-menu-item index="1-5">智慧灯杆</el-menu-item>
-        <el-menu-item index="1-6">智慧停车</el-menu-item>
-      </el-menu-item-group>
-    </el-sub-menu>
-
-    <el-sub-menu index="3">
-      <template #title>
-        <el-icon>
-          <Location />
-        </el-icon>
-        <span>智慧环境</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="1-1">实时监测</el-menu-item>
-        <el-menu-item index="1-2">数据查询</el-menu-item>
-        <el-menu-item index="1-3">报警查询</el-menu-item>
-        <el-menu-item index="1-4">报警级别配置</el-menu-item>
-        <el-menu-item index="1-5">报警联动</el-menu-item>
-        <el-menu-item index="1-6">存储策略配置</el-menu-item>
-        <el-menu-item index="1-7">配置偏差阀值</el-menu-item>
-      </el-menu-item-group>
-    </el-sub-menu>
-  </el-menu>
+  <div class="h-full flex flex-col sider-area">
+    <div class="flex items-center p-4 bg-el-menu-bg-color transition-all duration-300 logo-container">
+      <div class="w-8 h-8 flex-shrink-0 logo">
+        <img src="@/assets/logo.svg" alt="Logo" class="w-full h-full object-contain logo-image" />
+      </div>
+      <h1 v-show="!store.collapsed" class="ml-3 text-18px font-bold text-el-text-color-primary whitespace-nowrap overflow-hidden text-ellipsis system-title">
+        沅陵后台管理系统
+      </h1>
+    </div>
+    <el-menu
+      :default-active="activeIndex"
+      class="flex-grow border-r-0 el-menu-vertical"
+      :collapse="store.collapsed"
+      :collapse-transition="false"
+      router
+    >
+      <recursive-menu-item
+        v-for="item in treeRoutes"
+        :key="item.path"
+        :item="item"
+      />
+    </el-menu>
+  </div>
 </template>
-
-<style scoped>
-.el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 200px;
-  min-height: 400px;
-}
-</style>

src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useDynamicRoutes } from '@/router/route.ts'
 
 
 const router = createRouter({
@@ -6,21 +7,36 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: '首页',
+      name: 'layout',
+      component: () => import('../layout/LayoutPage.vue'),
       children: [
         {
           path: '',
           name: 'home',
-          component: () => import('../views/HomeView.vue'),
-        },
+          component: () => import('@/views/HomeView.vue'),
+        }
       ],
     },
     {
-      path: '/about',
-      name: 'about',
-      component: () => import('../views/AboutView.vue'),
+      path:"/NotFound404",
+      name:"404",
+      component: () => import('../views/NotFound404View.vue'),
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/NotFound404'
     },
   ],
 })
+console.log(router.getRoutes())
+const dynamicRoutesList = useDynamicRoutes()
+dynamicRoutesList.forEach(item => {
+  router.addRoute('layout', {
+    path: item.path,
+    name: item.name,
+    component: () => import(`/src/${item.addr}`)
+  })
+})
+console.log(router.getRoutes())
 
 export default router

src/router/route.ts

@@ -0,0 +1,166 @@
+export interface RouterType {
+  path:string,
+  name:string,
+  addr?:string,
+  icon?:string,
+  children?:RouterType[]
+}
+
+export const buildTree =(routes: RouterType[]): RouterType[]=> {
+  const map: { [key: string]: RouterType } = {}
+  const tree: RouterType[] = []
+  routes.forEach(route => {
+    map[route.path] = { ...route, children: [] }
+  })
+
+  for (const route of routes) {
+    const parentPath = route.path.substring(0, route.path.lastIndexOf('/'))
+    if (map[parentPath]) {
+      map[parentPath].children?.push(map[route.path])
+    } else {
+      tree.push(map[route.path])
+    }
+  }
+
+  return tree
+}
+
+export const routeList:RouterType[] = [
+  {
+    path: 'zhdpgl',
+    name: '智慧大屏管理',
+    icon: 'Location'
+  },
+  {
+    path: 'zhdpgl/yqzl',
+    name: '园区总览',
+    icon: 'Location',
+    addr: 'zhdpgl/yqzl'
+  },
+  {
+    path: 'zhdpgl/zhaf',
+    name: '智慧安防',
+    icon: 'Location',
+    addr: 'zhdpgl/zhaf'
+  },
+  {
+    path: 'zhdpgl/zhnh',
+    name: '智慧能耗',
+    icon: 'Location',
+    addr: 'zhdpgl/zhnh'
+  },
+  {
+    path: 'zhdpgl/zhxf',
+    name: '智慧消防',
+    icon: 'Location',
+    addr: 'zhdpgl/zhxf'
+  },
+  {
+    path: 'zhdpgl/zhdg',
+    name: '智慧灯杆',
+    icon: 'Location',
+    addr: 'zhdpgl/zhdg'
+  },
+  {
+    path: 'zhdpgl/zhtc',
+    name: '智慧停车',
+    icon: 'Location',
+    addr: 'zhdpgl/zhtc'
+  },
+  {
+    path: 'zhld',
+    name: '智慧路灯',
+    icon: 'Location',
+  },
+  {
+    path: 'zhld/yqzl',
+    name: '园区总览2',
+    icon: 'Location',
+    addr: 'zhld/yqzl'
+  },
+  {
+    path: 'zhld/zhaf',
+    name: '智慧安防2',
+    icon: 'Location',
+    addr: 'zhld/zhaf'
+  },
+  {
+    path: 'zhld/zhnh',
+    name: '智慧能耗2',
+    icon: 'Location',
+    addr: 'zhld/zhnh'
+  },
+  {
+    path: 'zhld/zhxf',
+    name: '智慧消防2',
+    icon: 'Location',
+    addr: 'zhld/zhxf'
+  },
+  {
+    path: 'zhld/zhdg',
+    name: '智慧灯杆2',
+    icon: 'Location',
+    addr: 'zhld/zhdg'
+  },
+  {
+    path: 'zhld/zhtc',
+    name: '智慧停车2',
+    icon: 'Location',
+    addr: 'zhld/zhtc'
+  },
+  {
+    path: 'zhhj',
+    name: '智慧环境',
+    icon: 'Location',
+  },
+  {
+    path: 'zhhj/ssjc',
+    name: '实时监测',
+    icon: 'Location',
+    addr: 'zhhj/ssjc'
+  },
+  {
+    path: 'zhhj/sjcx',
+    name: '数据查询',
+    icon: 'Location',
+    addr: 'zhhj/sjcx'
+  },
+  {
+    path: 'zhhj/bjcx',
+    name: '报警查询',
+    icon: 'Location',
+    addr: 'zhhj/bjcx'
+  },
+  {
+    path: 'zhhj/bjjbpz',
+    name: '报警级别配置',
+    icon: 'Location',
+    addr: 'zhhj/bjjbpz'
+  },
+  {
+    path: 'zhhj/bjld',
+    name: '报警联动',
+    icon: 'Location',
+    addr: 'zhhj/bjld'
+  },
+  {
+    path: 'zhhj/ccclpz',
+    name: '存储策略配置',
+    icon: 'Location',
+    addr: 'zhhj/ccclpz'
+  },
+  {
+    path: 'zhhj/pzpcyz',
+    name: '配置偏差阈值',
+    icon: 'Location',
+    addr: 'zhhj/pzpcyz'
+  },
+]
+export const useDynamicRoutes: () => RouterType[] = () => {
+  routeList.forEach(item => {
+    item.addr = `views/${item.addr}.vue`
+  })
+  return [
+    ...routeList
+  ]
+}

src/views/AboutView.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="about">
-    <h1>1231221321321312132132131231</h1>
-  </div>
-</template>
-
-<style>
-
-</style>

src/views/HomeView.vue

@@ -1,19 +1,7 @@
 <script setup lang="ts">
 
-import { ref } from 'vue'
-
-const item = {
-  date: '2016-05-02',
-  name: 'Tom',
-  address: 'No. 189, Grove St, Los Angeles'
-}
-const tableData = ref(Array.from({ length: 20 }).fill(item))
 </script>
 
 <template>
-  <el-table :data="tableData">
-    <el-table-column prop="date" label="Date" width="140" />
-    <el-table-column prop="name" label="Name" width="120" />
-    <el-table-column prop="address" label="Address" />
-  </el-table>
+  首页
 </template>

src/views/NotFound404View.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>404 Not Found</div>
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/yqzl.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ 132131212312
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/zhaf.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+5252532523523
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/zhdg.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+1412412412
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/zhnh.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+564564684
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/zhtc.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+41234314134141
+</template>
+
+<style scoped>
+
+</style>

src/views/zhdpgl/zhxf.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+1343232142341
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/bjcx.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+yfdhyfghhtths
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/bjjbpz.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ghdftyytdfhn
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/bjld.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+gfhdfhthfdhfd
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/ccclpz.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+hdhythujnbcv
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/pzpcyz.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+dghdhthdftd
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/sjcx.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+kjlhjpoh[;o;jh
+</template>
+
+<style scoped>
+
+</style>

src/views/zhhj/ssjc.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+dsfaw3524tgzfz
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/yqzl.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+ n,mmn,mn,nm,nm,mn
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/zhaf.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+zxczcxzcxzcxzcxzcxzczx
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/zhdg.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+asdsadsadsadasdasdsadsa
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/zhnh.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+wqeqwewqewqewqeqwewq
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/zhtc.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+yuyutuytuytuytuyuytut
+</template>
+
+<style scoped>
+
+</style>

src/views/zhld/zhxf.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+hjkjhkjhkjhkjhkhkhj
+</template>
+
+<style scoped>
+
+</style>