修改菜单

ruoyi-ui/src/layout/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide&&$route=='/index'" class="sidebar-container" />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
     <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout" v-if="$route=='/index'"/>
-        <tags-view v-if="needTagsView&&$route=='/index'" />
+        <navbar @setLayout="setLayout"/>
+        <tags-view v-if="needTagsView" />
       </div>
       <app-main />
       <settings ref="settingRef" />

ruoyi-ui/src/layoutEx/components/AppMain.vue

@@ -0,0 +1,79 @@
+<template>
+  <section class="app-main">
+    <router-view v-slot="{ Component, route }">
+      <transition name="fade-transform" mode="out-in">
+        <keep-alive :include="tagsViewStore.cachedViews">
+          <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
+        </keep-alive>
+      </transition>
+    </router-view>
+    <iframe-toggle />
+    <copyright />
+  </section>
+</template>
+
+<script setup>
+import copyright from "./Copyright/index"
+import iframeToggle from "./IframeToggle/index"
+import useTagsViewStore from '@/store/modules/tagsView'
+
+const route = useRoute()
+const tagsViewStore = useTagsViewStore()
+
+onMounted(() => {
+  addIframe()
+})
+
+watchEffect(() => {
+  addIframe()
+})
+
+function addIframe() {
+  if (route.meta.link) {
+    useTagsViewStore().addIframeView(route)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 70px);
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-main:has(.copyright) {
+  padding-bottom: 36px;
+}
+
+.fixed-header + .app-main {
+  padding-top: 70px;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 6px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #c0c0c0;
+  border-radius: 3px;
+}
+</style>
+

ruoyi-ui/src/layoutEx/components/Copyright/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <footer v-if="visible" class="copyright">
+    <span>{{ content }}</span>
+  </footer>
+</template>
+
+<script setup>
+import useSettingsStore from '@/store/modules/settings'
+
+const settingsStore = useSettingsStore()
+
+const visible = computed(() => settingsStore.footerVisible)
+const content = computed(() => settingsStore.footerContent)
+</script>
+
+<style scoped>
+.copyright {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 36px;
+  padding: 10px 20px;
+  text-align: right;
+  background-color: #f8f8f8;
+  color: #666;
+  font-size: 14px;
+  border-top: 1px solid #e7e7e7;
+  z-index: 999;
+}
+</style>

ruoyi-ui/src/layoutEx/components/IframeToggle/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <inner-link
+    v-for="(item, index) in tagsViewStore.iframeViews"
+    :key="item.path"
+    :iframeId="'iframe' + index"
+    v-show="route.path === item.path"
+    :src="iframeUrl(item.meta.link, item.query)"
+  ></inner-link>
+</template>
+
+<script setup>
+import InnerLink from "../InnerLink/index"
+import useTagsViewStore from "@/store/modules/tagsView"
+
+const route = useRoute()
+const tagsViewStore = useTagsViewStore()
+
+function iframeUrl(url, query) {
+  if (Object.keys(query).length > 0) {
+    let params = Object.keys(query).map((key) => key + "=" + query[key]).join("&")
+    return url + "?" + params
+  }
+  return url
+}
+</script>

ruoyi-ui/src/layoutEx/components/InnerLink/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
+    <iframe
+      :id="iframeId"
+      style="width: 100%; height: 100%"
+      :src="src"
+      ref="iframeRef"
+      frameborder="no"
+    ></iframe>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: "/"
+  },
+  iframeId: {
+    type: String
+  }
+})
+
+const loading = ref(true)
+const height = ref(document.documentElement.clientHeight - 94.5 + 'px')
+const iframeRef = ref(null)
+
+onMounted(() => {
+  if (iframeRef.value) {
+    iframeRef.value.onload = () => {
+      loading.value = false
+    }
+  }
+})
+</script>

ruoyi-ui/src/layoutEx/components/Navbar.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="navbar">
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
+
+    <div class="right-menu">
+      <template v-if="appStore.device !== 'mobile'">
+        <header-search id="header-search" class="right-menu-item" />
+
+        <el-tooltip content="源码地址" effect="dark" placement="bottom">
+          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <el-tooltip content="文档地址" effect="dark" placement="bottom">
+          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
+        </el-tooltip>
+
+        <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+        <el-tooltip content="主题模式" effect="dark" placement="bottom">
+          <div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
+            <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
+            <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
+          </div>
+        </el-tooltip>
+
+        <el-tooltip content="布局大小" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>
+      </template>
+
+      <el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
+        <div class="avatar-wrapper">
+          <img :src="userStore.avatar" class="user-avatar" />
+          <span class="user-nickname"> {{ userStore.nickName }} </span>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <router-link to="/user/profile">
+              <el-dropdown-item>个人中心</el-dropdown-item>
+            </router-link>
+            <el-dropdown-item divided command="logout">
+              <span>退出登录</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
+        <svg-icon icon-class="more-up" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus'
+import Breadcrumb from '@/components/Breadcrumb'
+import TopNav from '@/components/TopNav'
+import Hamburger from '@/components/Hamburger'
+import Screenfull from '@/components/Screenfull'
+import SizeSelect from '@/components/SizeSelect'
+import HeaderSearch from '@/components/HeaderSearch'
+import RuoYiGit from '@/components/RuoYi/Git'
+import RuoYiDoc from '@/components/RuoYi/Doc'
+import useAppStore from '@/store/modules/app'
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'
+
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+
+function toggleSideBar() {
+  appStore.toggleSideBar()
+}
+
+function handleCommand(command) {
+  switch (command) {
+    case "setLayout":
+      setLayout()
+      break
+    case "logout":
+      logout()
+      break
+    default:
+      break
+  }
+}
+
+function logout() {
+  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    userStore.logOut().then(() => {
+      location.href = '/index'
+    })
+  }).catch(() => { })
+}
+
+const emits = defineEmits(['setLayout'])
+function setLayout() {
+  emits('setLayout')
+}
+
+function toggleTheme() {
+  settingsStore.toggleTheme()
+}
+</script>
+
+<style lang='scss' scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: var(--navbar-bg);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .topmenu-container {
+    position: absolute;
+    left: 50px;
+  }
+
+  .errLog-container {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+    display: flex;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+
+      &.theme-switch-wrapper {
+        display: flex;
+        align-items: center;
+
+        svg {
+          transition: transform 0.3s;
+          
+          &:hover {
+            transform: scale(1.15);
+          }
+        }
+      }
+    }
+
+    .avatar-container {
+      margin-right: 0px;
+      padding-right: 0px;
+
+      .avatar-wrapper {
+        margin-top: 10px;
+        right: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+        }
+
+        .user-nickname{
+          position: relative;
+          left: 5px;
+          bottom: 10px;
+          font-size: 14px;
+          font-weight: bold;
+        }
+
+        i {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

ruoyi-ui/src/layoutEx/components/Sidebar/Link.vue

@@ -0,0 +1,40 @@
+<template>
+  <component :is="type" v-bind="linkProps()">
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { isExternal } from '@/utils/validate'
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true
+  }
+})
+
+const isExt = computed(() => {
+  return isExternal(props.to)
+})
+
+const type = computed(() => {
+  if (isExt.value) {
+    return 'a'
+  }
+  return 'router-link'
+})
+
+function linkProps() {
+  if (isExt.value) {
+    return {
+      href: props.to,
+      target: '_blank',
+      rel: 'noopener'
+    }
+  }
+  return {
+    to: props.to
+  }
+}
+</script>

ruoyi-ui/src/layoutEx/components/Sidebar/Logo.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
+    <transition name="sidebarLogoFade">
+      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 v-else class="sidebar-title">{{ title }}</h1>
+      </router-link>
+      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
+        <h1 class="sidebar-title">{{ title }}</h1>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import logo from '@/assets/logo/logo.png'
+import useSettingsStore from '@/store/modules/settings'
+import variables from '@/assets/styles/variables.module.scss'
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const title = import.meta.env.VITE_APP_TITLE
+const settingsStore = useSettingsStore()
+const sideTheme = computed(() => settingsStore.sideTheme)
+
+// 获取Logo背景色
+const getLogoBackground = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-bg)'
+  }
+  return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+})
+
+// 获取Logo文字颜色
+const getLogoTextColor = computed(() => {
+  if (settingsStore.isDark) {
+    return 'var(--sidebar-text)'
+  }
+  return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText
+})
+</script>
+
+<style lang="scss" scoped>
+.sidebarLogoFade-enter-active {
+  transition: opacity 1.5s;
+}
+
+.sidebarLogoFade-enter,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+
+.sidebar-logo-container {
+  position: relative;
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  background: v-bind(getLogoBackground);
+  text-align: center;
+  overflow: hidden;
+
+  & .sidebar-logo-link {
+    height: 100%;
+    width: 100%;
+
+    & .sidebar-logo {
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+      margin-right: 12px;
+    }
+
+    & .sidebar-title {
+      display: inline-block;
+      margin: 0;
+      color: v-bind(getLogoTextColor);
+      font-weight: 600;
+      line-height: 50px;
+      font-size: 14px;
+      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+      vertical-align: middle;
+    }
+  }
+
+  &.collapse {
+    .sidebar-logo {
+      margin-right: 0px;
+    }
+  }
+}
+</style>

ruoyi-ui/src/layoutEx/components/Sidebar/SidebarItem.vue

@@ -0,0 +1,100 @@
+<template>
+  <div v-if="!item.hidden">
+    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
+          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
+        </el-menu-item>
+      </app-link>
+    </template>
+
+    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
+      <template v-if="item.meta" #title>
+        <svg-icon :icon-class="item.meta && item.meta.icon" />
+        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
+      </template>
+
+      <sidebar-item
+        v-for="(child, index) in item.children"
+        :key="child.path + index"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+        class="nest-menu"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup>
+import { isExternal } from '@/utils/validate'
+import AppLink from './Link'
+import { getNormalPath } from '@/utils/ruoyi'
+
+const props = defineProps({
+  // route object
+  item: {
+    type: Object,
+    required: true
+  },
+  isNest: {
+    type: Boolean,
+    default: false
+  },
+  basePath: {
+    type: String,
+    default: ''
+  }
+})
+
+const onlyOneChild = ref({})
+
+function hasOneShowingChild(children = [], parent) {
+  if (!children) {
+    children = []
+  }
+  const showingChildren = children.filter(item => {
+    if (item.hidden) {
+      return false
+    }
+    onlyOneChild.value = item
+    return true
+  })
+
+  // When there is only one child router, the child router is displayed by default
+  if (showingChildren.length === 1) {
+    return true
+  }
+
+  // Show parent if there are no child router to display
+  if (showingChildren.length === 0) {
+    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    return true
+  }
+
+  return false
+}
+
+function resolvePath(routePath, routeQuery) {
+  if (isExternal(routePath)) {
+    return routePath
+  }
+  if (isExternal(props.basePath)) {
+    return props.basePath
+  }
+  if (routeQuery) {
+    let query = JSON.parse(routeQuery)
+    return { path: getNormalPath(props.basePath + '/' + routePath), query: query }
+  }
+  return getNormalPath(props.basePath + '/' + routePath)
+}
+
+function hasTitle(title){
+  if (title.length > 5) {
+    return title
+  } else {
+    return ""
+  }
+}
+</script>

ruoyi-ui/src/layoutEx/components/Sidebar/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <sidebar-item
+    v-for="(route, index) in props.menuItem"
+    :key="route.path + index"
+    :item="route"
+    :base-path="route.path"
+  />
+</template>
+
+<script setup>
+import SidebarItem from './SidebarItem';
+const props = defineProps({
+    menuItem: {
+      type: Object,
+    },
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

ruoyi-ui/src/layoutEx/components/index.js

@@ -0,0 +1,4 @@
+export { default as AppMain } from './AppMain'
+export { default as Navbar } from './Navbar'
+// export { default as Settings } from './Settings'
+// export { default as TagsView } from './TagsView/index.vue'

ruoyi-ui/src/views/YuJing/index.vue → ruoyi-ui/src/layoutEx/index.vue

@@ -9,10 +9,10 @@
         <div
           v-for="(item, index) in menuList"
           :key="index"
-          :class="{'menuItem-deactive':menuLeftValue!=item.name,'menuItem-active':menuLeftValue==item.name}"
+          :class="{'menuItem-deactive':menuLeftValue!=item.meta.title,'menuItem-active':menuLeftValue==item.meta.title}"
           @click="menuValueFn(item)"
         >
-          {{ item.name }}
+          {{ item.meta.title }}
         </div>
         <el-dropdown @command="handleCommand" class="avatar-dropdown" trigger="hover">
           <div class="avatar-wrapper">
@@ -37,7 +37,7 @@
       </div>
     </div>
     <div class="yjContent">
-      <div class="contentLeft" :class="{ collapsed: !leftItem}" v-show="$route.path != '/YuJing/shouye/index'">
+      <div class="contentLeft" :class="{ 'collapsed': !leftItem}" v-if="menuLeftValue != '首页'">
         <div class="leftMenu">
           <el-menu
             :default-active="$route.path"
@@ -49,7 +49,7 @@
             :router="true"
           >
             <div class="leftTitle">
-              <template v-if="leftItem">{{ $route.meta.title }}
+              <template v-if="leftItem">{{ menuLeftValue }}
                 <img
                   src="/src/assets/images/left.png"
                   alt=""
@@ -63,158 +63,55 @@
                   @click="imgLeftFn"/>
               </template>
             </div>
-            <template v-for="item in menuData[menuLeftValue]" :key="item.path">
-              <el-sub-menu v-if="item.children" :index="item.path">
-                <template #title>
-                  <el-icon><component :is="item.icon" /></el-icon>
-                  <span>{{ item.title }}</span>
-                </template>
-                <el-menu-item
-                  v-for="child in item.children"
-                  :key="child.path"
-                  :index="child.path"
-                >
-                  <el-icon><component :is="child.icon" /></el-icon>
-                  <span>{{ child.title }}</span>
-                </el-menu-item>
-              </el-sub-menu>
-              <el-menu-item v-else :index="item.path">
-                <el-icon><component :is="item.icon" /></el-icon>
-                <template #title>{{ item.title }}</template>
-              </el-menu-item>
-            </template>
+            <sidebar :menuItem="menuItem"/>
           </el-menu>
         </div>
       </div>
-      <div class="contentRight" :class="{ collapsed: !leftItem }">
-        <router-view v-slot="{ Component, route }">
-          <transition name="fade-transform" mode="out-in">
-            <keep-alive >
-              <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
-            </keep-alive>
-          </transition>
-        </router-view>
+      <div class="contentRight" :class="{ 'collapsed': !leftItem }">
+        <app-main />
       </div>
     </div>
   </div>
 </template>
-<script lang="js" setup>
-import { ref, reactive, markRaw } from "vue";
-import useUserStore from '@/store/modules/user'
-import {Setting} from "@element-plus/icons-vue";
-import { ElMessageBox } from 'element-plus'
 
-const routerInstance = useRouter();
+<script setup>
+import Sidebar from './components/Sidebar/index.vue';
+import { AppMain} from './components';
+import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
+import {staticMenuData} from "@/router/staticMenuData"
+import { ref } from 'vue';
+
+const sidebar = computed(() => useAppStore().sidebar)
 const userStore = useUserStore();
-const route = useRoute()
-const menuLeftValue = ref("");
 const leftItem = ref(true);
-const menuList = ref([
-  { name: "首页", path: "/YuJing/shouye/index" },
-  { name: "值班管理",path: "/YuJing/transaction/dutyRecord" },
-  { name: "水功能区",path: "/YuJing/water/monitorAlert" }
-]);
-const menuData = reactive({
-  "值班管理": [
-    {
-      index: "3",
-      title: "事务管理",
-      icon: markRaw(Setting),
-      children: [
-      { index: "3-1", title: "值班记录",icon: markRaw(Setting), path: "/YuJing/transaction/dutyRecord" },
-      { index: "3-2", title: "会商记录",icon: markRaw(Setting), path: "/YuJing/transaction/consultationRecord" }]
-    },
-    {
-      index: "4",
-      title: "邮件管理",
-      icon: markRaw(Setting),
-    }
-  ],
-  "水功能区": [
-    {
-      index: "5",
-      title: "监视告警",
-      icon: markRaw(Setting),
-      path: "/YuJing/water/monitorAlert" 
-    },
-  ]
-});
 const isCollapse = ref(false);
+const menuLeftValue = ref(useRoute().meta.title);
+const menuList = staticMenuData[0].children;
+const menuItem = ref(null);
+console.log('menuList',menuList);
+
+const menuValueFn = (row) => {
+  menuLeftValue.value = row.meta.title;
+  menuItem.value = row.children;
+};
 
-onMounted(() => {
-  menuLeftValue.value = route.meta.title;
-});
 function imgLeftFn() {
   isCollapse.value = !isCollapse.value;
   leftItem.value = !leftItem.value;
-}
-const menuValueFn = (val) => {
-  menuLeftValue.value = val.name;
-  if (val.path) {
-    routerInstance.push(val.path);
-  };
-};   
-function handleMenuSelect(index) {
-  // 查找对应的路径
-  let path = '/';
-  for (const category of Object.values(menuData)) {
-    for (const item of category) {
-      if (item.index === index) {
-        path = item.path || '/';
-        break;
-      };
-      if (item.children) {
-        const child = item.children.find(child => child.index === index);
-        if (child) {
-          path = child.path || '/';
-          break;
-        };
-      };
-    };
-  };
-  routerInstance.push(path);
 };
-function handleCommand(command) {
-  switch (command) {
-    case "setLayout":
-      setLayout()
-      break
-    case "logout":
-      logout()
-      break
-    default:
-      break
-  }
-};
-function logout() {
-  ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    userStore.logOut().then(() => {
-      location.href = '/index'
-    })
-  }).catch(() => { })
-}
-const emits = defineEmits(['setLayout'])
-function setLayout() {
-  emits('setLayout')
-}
 </script>
+
 <style scoped lang="scss">
 .yujing-index {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   .yjIndexTop {
-    height: 7.74vh;
+    height: 70px;
     width: 100%;
-    background: url("../../assets/images/top-bg.png") no-repeat;
+    background: url("@/assets/images/top-bg.png") no-repeat;
     background-size: 100% 100%;
     display: flex;
     .title {
@@ -222,43 +119,37 @@ function setLayout() {
       width: 26.5%;
       margin-left: 20px;
       .yujing-logo{
-        width: 3.125vw;
-        height: 5.66vh;
+        width: 3.75rem;
+        height: 3.75rem;
         position: absolute;
-        top: 7px;
+        top: 3px;
       }
       span{
-        font-size: 28px;
-        line-height: 7.17vh;
+        font-size: 1.875rem;
+        line-height:70px;
         color: #fff;
         position: absolute;
-        right: 20%;
+        right: 16%;
       }
     }
     .menu {
       margin-top: 0.9vh;
       // line-height: 4.25vh;
-      width: 62%;
+      width: 65%;
       display: flex;
       align-items: center; /* 水平居中 */
-      font-size: 20px;
+      font-size: 1.125rem;
       color: #1890ff;
       .menuItem-deactive {
-        margin-right: 5px;
-        // width: 8%;
-        // height: 60%;
-        padding: 5px 8px;
+        padding: 0.5rem 0.625rem;
         text-align: center;
-        border-radius: 15px 15px 15px 15px;
+        border-radius: 1rem;
         cursor: pointer;
       }
       .menuItem-active {
-        margin-right: 5px;
-        // width: 8%;
-        // height: 60%;
-        padding: 5px 8px;
+        padding: 0.5rem 0.625rem;
         text-align: center;
-        border-radius: 15px 15px 15px 15px;
+        border-radius: 1rem;
         background: rgba(93, 171, 255,0.3);
         cursor: pointer;
       }
@@ -268,7 +159,7 @@ function setLayout() {
     .avatar-dropdown{
       position: absolute;
       right: 10px;
-      top: 2.5%;
+      top: 2%;
       .avatar-wrapper{
         display: flex;
         align-items: center;
@@ -292,13 +183,6 @@ function setLayout() {
   .yjContent {
     flex: 1;
     display: flex;
-    .leftItemClass {
-      width: 3.281vw !important;
-      img {
-        margin: auto;
-        cursor: pointer;
-      }
-    }
     .contentLeft {
       width: 10%;
       height: 100%;
@@ -311,7 +195,7 @@ function setLayout() {
         text-align: center;
         line-height: 2.83vh;
         font-size: 18px;
-        background: url("../../assets/images/lefttitle-bg.png") no-repeat;
+        background: url("@/assets/images/lefttitle-bg.png") no-repeat;
         background-size: 100% 100%;
         .imgLeft {
           position: absolute;
@@ -321,11 +205,9 @@ function setLayout() {
         }
       }
       &.collapsed {
-        width: 3.281 !important;
-
+        width: 3.281vw !important;
         .leftTitle {
           padding: 0 5px;
-
           .imgLeft {
             position: static;
             margin: 5px auto;
@@ -345,8 +227,8 @@ function setLayout() {
       flex: 1;
       transition: margin-left 0.3s;
       height: 100%;
-      &.expanded {
-        margin-left: 73px; /* 63px + 10px */
+      &.collapsed {
+        // margin-left: 73px; 
       }
     }
   }
@@ -365,4 +247,4 @@ function setLayout() {
 .contentLeft .el-menu .el-sub-menu__title:hover {
   background-color: rgb(93, 171, 255) !important;
 } 
-</style>
+</style>

ruoyi-ui/src/permission.js

@@ -11,7 +11,7 @@ import usePermissionStore from "@/store/modules/permission";
 
 NProgress.configure({ showSpinner: false });
 
-const whiteList = ["/login", "/index", "/register"];
+const whiteList = ["/login", "/shouye/index", "/register"];
 
 const isWhiteList = (path) => {
   return whiteList.some((pattern) => isPathMatch(pattern, path));
@@ -19,50 +19,50 @@ const isWhiteList = (path) => {
 
 router.beforeEach((to, from, next) => {
   next();
-  // NProgress.start();
-  // if (getToken()) {
-  //   to.meta.title && useSettingsStore().setTitle(to.meta.title)
-  //   /* has token*/
-  //   if (to.path === '/login') {
-  //     next({ path: '/' })
-  //     NProgress.done()
-  //   } else if (isWhiteList(to.path)) {
-  //     next()
-  //   } else {
-  //     if (useUserStore().roles.length === 0) {
-  //       isRelogin.show = true
-  //       // 判断当前用户是否已拉取完user_info信息
-  //       useUserStore().getInfo().then(() => {
-  //         isRelogin.show = false
-  //         usePermissionStore().generateRoutes().then(accessRoutes => {
-  //           // 根据roles权限生成可访问的路由表
-  //           accessRoutes.forEach(route => {
-  //             if (!isHttp(route.path)) {
-  //               router.addRoute(route) // 动态添加可访问路由表
-  //             }
-  //           })
-  //           next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-  //         })
-  //       }).catch(err => {
-  //         useUserStore().logOut().then(() => {
-  //           ElMessage.error(err)
-  //           next({ path: '/' })
-  //         })
-  //       })
-  //     } else {
-  //       next()
-  //     }
-  //   }
-  // } else {
-  // 没有token
-  // if (isWhiteList(to.path)) {
-  //   // 在免登录白名单，直接进入
-  //   next();
-  // } else {
-  //   next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
-  //   NProgress.done();
-  // }
-  // }
+  NProgress.start();
+  if (getToken()) {
+    to.meta.title && useSettingsStore().setTitle(to.meta.title)
+    /* has token*/
+    if (to.path === '/login') {
+      next({ path: '/' })
+      NProgress.done()
+    } else if (isWhiteList(to.path)) {
+      next()
+    } else {
+      if (useUserStore().roles.length === 0) {
+        isRelogin.show = true
+        // 判断当前用户是否已拉取完user_info信息
+        useUserStore().getInfo().then(() => {
+          isRelogin.show = false
+          usePermissionStore().generateRoutes().then(accessRoutes => {
+            // 根据roles权限生成可访问的路由表
+            accessRoutes.forEach(route => {
+              if (!isHttp(route.path)) {
+                router.addRoute(route) // 动态添加可访问路由表
+              }
+            })
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+          })
+        }).catch(err => {
+          useUserStore().logOut().then(() => {
+            ElMessage.error(err)
+            next({ path: '/' })
+          })
+        })
+      } else {
+        next()
+      }
+    }
+  } else {
+  //没有token
+  if (isWhiteList(to.path)) {
+    // 在免登录白名单，直接进入
+    next();
+  } else {
+    next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
+    NProgress.done();
+  }
+  }
 });
 
 router.afterEach(() => {

ruoyi-ui/src/router/index.js

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 import yjLayout from '@/views/YuJing/index.vue'
+import LayoutEx from "@/layoutEx";
 
 /**
  * Note: 路由配置项
@@ -60,7 +61,6 @@ export const constantRoutes = [
   },
   {
     path: '',
-    component: Layout,
     redirect: '/index',
     children: [
       {
@@ -71,28 +71,176 @@ export const constantRoutes = [
       }
     ]
   },
+  
   {
-    path: '/YuJing/index',
-    component: yjLayout,
-    hidden: true,
+    path: '/yujing',
+    component: LayoutEx,
     children: [
       {
-        path: '/YuJing/shouye/index',
-        component: () => import('@/views/YuJing/shouye/index.vue'),
-        meta: { title: '首页', icon: 'Setting', affix: true }
+        path: '/yujing/shouye',
+        component: () => import('@/views/shouye/index'),
+        name: 'shouye',
+        meta: { title: '首页'}
       },
       {
-        path: '/YuJing/transaction/dutyRecord',
-        component: () => import('@/views/YuJing/transaction/dutyRecord.vue'),
-        meta: { title: '值班管理', icon: 'Setting', affix: true }
+        path: '',
+        name: 'zhiban',
+        meta: { title: '值班管理'},
+        children:[
+          {
+            path: '',
+            meta: { title: '事务管理', icon: 'Setting'},
+            children:[
+              {
+                path: '/zhibanjilu',
+                component: () => import('@/views/zhiban/shiwu/zhibanjilu.vue'),
+                meta: { title: '值班记录', icon: 'Setting'},
+              },
+              {
+                path: '/hushangjilu',
+                component: () => import('@/views/zhiban/shiwu/hushangjilu.vue'),
+                meta: { title: '会商记录', icon: 'Setting'},
+              },
+              {
+                path: '/zhibanjihua',
+                component: () => import('@/views/zhiban/shiwu/zhibanjihua.vue'),
+                meta: { title: '值班计划', icon: 'Setting'},
+              },
+              {
+                path: '/tongxunlu',
+                component: () => import('@/views/zhiban/shiwu/tongxunlu.vue'),
+                meta: { title: '人员通讯录', icon: 'Setting'},
+              },
+            ]
+          },
+          {
+            path: '',
+            meta: { title: '邮件管理', icon: 'Setting'},
+            children:[
+              {
+                path: '/zhibanjilu',
+                component: () => import('@/views/zhiban/youjian/taihushuizhi.vue'),
+                meta: { title: '太湖水质信息', icon: 'Setting'},
+              },
+              {
+                path: '/hushangjilu',
+                component: () => import('@/views/zhiban/youjian/wangyuheshuizhi.vue'),
+                meta: { title: '望虞河水质信息', icon: 'Setting'},
+              },
+              {
+                path: '/zhibanjihua',
+                component: () => import('@/views/zhiban/youjian/youxiang.vue'),
+                meta: { title: '邮箱通讯录', icon: 'Setting'},
+              },
+              {
+                path: '/tongxunlu',
+                component: () => import('@/views/zhiban/youjian/youjian.vue'),
+                meta: { title: '邮件组', icon: 'Setting' },
+              },
+            ]
+          },
+          {
+            path: '/yujing/yingjijiance',
+            meta: { title: '应急监测', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/duanxinguanli',
+            meta: { title: '短信管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/jianceshuju',
+            meta: { title: '监测数据', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/chuanzhenguanli',
+            meta: { title: '传真管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/ziliaoguanli',
+            meta: { title: '资料管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/tufashuiwuran',
+            meta: { title: '突发水污染', icon: 'Setting'},
+          },
+        ]
       },
       {
-        path: '/YuJing/water/monitorAlert',
-        component: () => import('@/views/YuJing/water/monitorAlert.vue'),
-        meta: { title: '水功能区', icon: 'Setting', affix: true }
+        path: '',
+        name: 'zhiban',
+        meta: { title: '水功能区'},
+        children:[
+          {
+            path: '/yujing/jianshigaojing',
+            component: () => import('@/views/water/index.vue'),
+            meta: { title: '监视告警', icon: 'Setting'},
+          },
+          {
+            path: '',
+            meta: { title: '信息查询', icon: 'Setting'},
+            children:[
+              {
+                path: '/shuxingxinxi',
+                component: () => import('@/views/water/xinxichaxun/shuxingxinxi.vue'),
+                meta: { title: '属性信息', icon: 'Setting'},
+              },
+              {
+                path: '/jiancexinxi',
+                component: () => import('@/views/water/xinxichaxun/jiancexinxi.vue'),
+                meta: { title: '监测信息', icon: 'Setting' },
+              },
+              {
+                path: '/tongjixinxi',
+                component: () => import('@/views/water/xinxichaxun/tongjixinxi.vue'),
+                meta: { title: '统计信息', icon: 'Setting'},
+              },
+            ]
+          },
+          {
+            path: '/yujing/tongjifenxi',
+            meta: { title: '统计分析', icon: 'Setting'},
+          },
+          {
+            path: '//yujingshuigongneng',
+            component: () => import('@/views/water/shuigongneng.vue'),
+            meta: { title: '水功能区', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/dontaipingjia',
+            component: () => import('@/views/water/dontaipingjia.vue'),
+            meta: { title: '动态评价', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/ziliaozhengli',
+            component: () => import('@/views/water/ziliaozhengli.vue'),
+            meta: { title: '资料整理', icon: 'Setting'},
+          },
+        ]
       },
     ]
   },
+  // {
+  //   path: '/YuJing/index',
+  //   component: yjLayout,
+  //   hidden: true,
+  //   children: [
+  //     {
+  //       path: '/YuJing/shouye/index',
+  //       component: () => import('@/views/YuJing/shouye/index.vue'),
+  //       meta: { title: '首页', icon: 'Setting', affix: true }
+  //     },
+  //     {
+  //       path: '/YuJing/transaction/dutyRecord',
+  //       component: () => import('@/views/YuJing/transaction/dutyRecord.vue'),
+  //       meta: { title: '值班管理', icon: 'Setting', affix: true }
+  //     },
+  //     {
+  //       path: '/YuJing/water/monitorAlert',
+  //       component: () => import('@/views/YuJing/water/monitorAlert.vue'),
+  //       meta: { title: '水功能区', icon: 'Setting', affix: true }
+  //     },
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

ruoyi-ui/src/router/staticMenuData.js

@@ -0,0 +1,201 @@
+import LayoutEx from "@/layoutEx";
+
+export const staticMenuData = [
+  {
+    path: '/yujing',
+    component: 'LayoutEx',
+    children: [
+      {
+        path: '/yujing/shouye',
+        component: () => import('@/views/shouye/index'),
+        name: 'shouye',
+        meta: { title: '首页'}
+      },
+      {
+        path: '',
+        name: 'zhiban',
+        meta: { title: '值班管理'},
+        children:[
+          {
+            path: '',
+            meta: { title: '事务管理', icon: 'Setting'},
+            children:[
+              {
+                path: '/zhibanjilu',
+                component: () => import('@/views/zhiban/shiwu/zhibanjilu.vue'),
+                meta: { title: '值班记录', icon: 'Setting'},
+              },
+              {
+                path: '/hushangjilu',
+                component: () => import('@/views/zhiban/shiwu/hushangjilu.vue'),
+                meta: { title: '会商记录', icon: 'Setting'},
+              },
+              {
+                path: '/zhibanjihua',
+                component: () => import('@/views/zhiban/shiwu/zhibanjihua.vue'),
+                meta: { title: '值班计划', icon: 'Setting'},
+              },
+              {
+                path: '/tongxunlu',
+                component: () => import('@/views/zhiban/shiwu/tongxunlu.vue'),
+                meta: { title: '人员通讯录', icon: 'Setting'},
+              },
+            ]
+          },
+          {
+            path: '',
+            meta: { title: '邮件管理', icon: 'Setting'},
+            children:[
+              {
+                path: '/zhibanjilu',
+                component: () => import('@/views/zhiban/youjian/taihushuizhi.vue'),
+                meta: { title: '太湖水质信息', icon: 'Setting'},
+              },
+              {
+                path: '/hushangjilu',
+                component: () => import('@/views/zhiban/youjian/wangyuheshuizhi.vue'),
+                meta: { title: '望虞河水质信息', icon: 'Setting'},
+              },
+              {
+                path: '/zhibanjihua',
+                component: () => import('@/views/zhiban/youjian/youxiang.vue'),
+                meta: { title: '邮箱通讯录', icon: 'Setting'},
+              },
+              {
+                path: '/tongxunlu',
+                component: () => import('@/views/zhiban/youjian/youjian.vue'),
+                meta: { title: '邮件组', icon: 'Setting' },
+              },
+            ]
+          },
+          {
+            path: '/yujing/yingjijiance',
+            meta: { title: '应急监测', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/duanxinguanli',
+            meta: { title: '短信管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/jianceshuju',
+            meta: { title: '监测数据', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/chuanzhenguanli',
+            meta: { title: '传真管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/ziliaoguanli',
+            meta: { title: '资料管理', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/tufashuiwuran',
+            meta: { title: '突发水污染', icon: 'Setting'},
+          },
+        ]
+      },
+      {
+        path: '',
+        name: 'shuigongneng',
+        meta: { title: '水功能区'},
+        children:[
+          {
+            path: '/yujing/jianshigaojing',
+            component: () => import('@/views/water/index.vue'),
+            meta: { title: '监视告警', icon: 'Setting'},
+          },
+          {
+            path: '',
+            meta: { title: '信息查询', icon: 'Setting'},
+            children:[
+              {
+                path: '/shuxingxinxi',
+                component: () => import('@/views/water/xinxichaxun/shuxingxinxi.vue'),
+                meta: { title: '属性信息', icon: 'Setting'},
+              },
+              {
+                path: '/jiancexinxi',
+                component: () => import('@/views/water/xinxichaxun/jiancexinxi.vue'),
+                meta: { title: '监测信息', icon: 'Setting' },
+              },
+              {
+                path: '/tongjixinxi',
+                component: () => import('@/views/water/xinxichaxun/tongjixinxi.vue'),
+                meta: { title: '统计信息', icon: 'Setting'},
+              },
+            ]
+          },
+          {
+            path: '/yujing/tongjifenxi',
+            meta: { title: '统计分析', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/shuigongneng',
+            component: () => import('@/views/water/shuigongneng.vue'),
+            meta: { title: '水功能区', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/dontaipingjia',
+            component: () => import('@/views/water/dontaipingjia.vue'),
+            meta: { title: '动态评价', icon: 'Setting'},
+          },
+          {
+            path: '/yujing/ziliaozhengli',
+            component: () => import('@/views/water/ziliaozhengli.vue'),
+            meta: { title: '资料整理', icon: 'Setting'},
+          },
+        ]
+      },
+      {
+        path: '/yujing/ruhuheliu',
+        name: 'ruhuheliu',
+        meta: { title: '入湖河流'},
+      },
+      {
+        path: '/yujing/shengjieshuiti',
+        name: 'shengjieshuiti',
+        meta: { title: '省界水体'},
+      },
+      {
+        path: '/yujing/taihulanzao',
+        name: 'taihulanzao',
+        meta: { title: '太湖蓝藻'},
+      },
+      {
+        path: '/yujing/ruhepaiwukou',
+        name: 'ruhepaiwukou',
+        meta: { title: '入河排污口'},
+      },
+      {
+        path: '/yujing/yinjiangjitai',
+        name: 'yinjiangjitai',
+        meta: { title: '引江济太'},
+      },
+      {
+        path: '/yujing/mongxingyubao',
+        name: 'mongxingyubao',
+        meta: { title: '模型预报'},
+      },
+      {
+        path: '/yujing/dixiashuiguanli',
+        name: 'dixiashuiguanli',
+        meta: { title: '地下水管理'},
+      },
+      {
+        path: '/yujing/shuihulujiance',
+        name: 'shuihulujiance',
+        meta: { title: '水葫芦监测'},
+      },
+      {
+        path: '/yujing/shuihulu',
+        name: 'shuihulu',
+        meta: { title: '水葫芦'},
+      },
+      {
+        path: '/yujing/system',
+        name: 'system',
+        meta: { title: '系统管理'},
+      },
+    ]
+  },
+];

ruoyi-ui/src/views/index.vue

@@ -63,7 +63,7 @@ const router = useRouter();
 const userStore = useUserStore();
 const modules = [Autoplay, Pagination, Navigation, A11y];
 const slides = ref([
-  { image: YuJingLogo, title: '预警系统', secondTitle: "水资源保护系统", path: "/YuJing/shouye/index" },
+  { image: YuJingLogo, title: '预警系统', secondTitle: "水资源保护系统", path: "/yujing/shouye" },
   { image: "", title: '1', },
   { image: "", title: '2', },
   { image: "", title: '3', },

ruoyi-ui/src/views/YuJing/shouye/index.vue → ruoyi-ui/src/views/shouye/index.vue

@@ -102,7 +102,7 @@
 
 <script setup>
 import {ElMessage} from 'element-plus';
-import mapIndex from "../mapIndex/index.vue"
+import mapIndex from "../mapIndex"
 
 const mapObj = {
   center:[120.745, 31.120],