首页修改

ruoyi-ui/src/permission.js

@@ -1,24 +1,25 @@
-import router from './router'
-import { ElMessage } from 'element-plus'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isHttp, isPathMatch } from '@/utils/validate'
-import { isRelogin } from '@/utils/request'
-import useUserStore from '@/store/modules/user'
-import useSettingsStore from '@/store/modules/settings'
-import usePermissionStore from '@/store/modules/permission'
+import router from "./router";
+import { ElMessage } from "element-plus";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+import { isHttp, isPathMatch } from "@/utils/validate";
+import { isRelogin } from "@/utils/request";
+import useUserStore from "@/store/modules/user";
+import useSettingsStore from "@/store/modules/settings";
+import usePermissionStore from "@/store/modules/permission";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login','/YuJing/index', '/register']
+const whiteList = ["/login", "/index", "/register"];
 
 const isWhiteList = (path) => {
-  return whiteList.some(pattern => isPathMatch(pattern, path))
-}
+  return whiteList.some((pattern) => isPathMatch(pattern, path));
+};
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  next();
+  // NProgress.start();
   // if (getToken()) {
   //   to.meta.title && useSettingsStore().setTitle(to.meta.title)
   //   /* has token*/
@@ -53,18 +54,17 @@ router.beforeEach((to, from, next) => {
   //     }
   //   }
   // } else {
-    // 没有token
-    if (isWhiteList(to.path)) {
-      // 在免登录白名单，直接进入
-      next()
-    }
-    else {
-      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      NProgress.done()
-    }
+  // 没有token
+  // if (isWhiteList(to.path)) {
+  //   // 在免登录白名单，直接进入
+  //   next();
+  // } else {
+  //   next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
+  //   NProgress.done();
+  // }
   // }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});

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

@@ -1,13 +1,232 @@
 <template>
-  <div class="yujing-index">预警系统</div>
-</template>
+  <div class="yujing-index">
+    <div class="yjIndexTop">
+      <div class="title">预警系统-水资源保护系统</div>
+      <div class="menu">
+        <div
+          class="menuItem"
+          v-for="(item, index) in menuList"
+          :key="index"
+          @click="menuValueFn(item)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="yjContent">
+      <div class="contentLeft" :class="{ collapsed: !leftItem }">
+        <div class="leftMenu">
+          <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            :collapse="isCollapse"
+          >
+            <div class="leftTitle">
+              <template v-if="leftItem == true"
+                >{{ menuLeftValue }}
+                <img
+                  src="/src/assets/images/left.png"
+                  alt=""
+                  class="imgLeft"
+                  @click="imgLeftFn"
+              /></template>
+              <template v-else>
+                <img
+                  src="/src/assets/images/right.png"
+                  alt=""
+                  @click="imgLeftFn"
+              /></template>
+            </div>
+            <template v-for="item in menuData" :key="item.index">
+              <el-sub-menu v-if="item.children" :index="item.index">
+                <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.index"
+                  :index="child.index"
+                >
+                  {{ child.title }}
+                </el-menu-item>
+              </el-sub-menu>
 
+              <el-menu-item v-else :index="item.index">
+                <el-icon><component :is="item.icon" /></el-icon>
+                <template #title>{{ item.title }}</template>
+              </el-menu-item>
+            </template>
+          </el-menu>
+        </div>
+      </div>
+      <div class="contentRight" :class="{ collapsed: !leftItem }"></div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, markRaw } from "vue";
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from "@element-plus/icons-vue";
+const menuLeftValue = ref("首页");
+const menuList = ref([
+  {
+    name: "首页",
+  },
+  {
+    name: "值班管理",
+  },
+  {
+    name: "水功能区",
+  },
+]);
+const leftItem = ref(true);
+const menuData = reactive([
+  {
+    index: "1",
+    title: "事务管理",
+    icon: markRaw(Location),
+    children: [
+      { index: "1-1", title: "item one" },
+      { index: "1-2", title: "item two" },
+      { index: "1-3", title: "item three" },
+    ],
+  },
+  {
+    index: "2",
+    title: "邮件管理",
+    icon: markRaw(IconMenu),
+  },
+]);
+const isCollapse = ref(false);
+function menuValueFn(val) {
+  menuLeftValue.value = val.name;
+}
+function imgLeftFn() {
+  isCollapse.value = !isCollapse.value;
+  leftItem.value = !leftItem.value;
+  console.log(leftItem.value, "3333");
+}
+</script>
 <style scoped lang="scss">
-.yujing-index{
+.yujing-index {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  .yjIndexTop {
+    height: 82px;
+    width: 100%;
+    background: url("../../assets/images/top-bg.png") no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+
+    .title {
+      width: 30%;
+      margin-left: 20px;
+      font-size: 26px;
+      line-height: 76px;
+      color: #fff;
+    }
+    .menu {
+      margin-top: 40px;
+      width: 60%;
+      display: flex;
+      font-size: 20px;
+      color: #1890ff;
+      .menuItem {
+        width: 100px;
+        cursor: pointer;
+      }
+    }
+  }
+  .yjContent {
+    flex: 1;
+    display: flex;
+    .leftItemClass {
+      width: 63px !important;
+      img {
+        margin: auto;
+        cursor: pointer;
+      }
+    }
+    .contentLeft {
+      width: 10%;
+      height: 100%;
+      transition: all 0.3s ease-in-out; /* 添加过渡效果 */
+      overflow: hidden; /* 防止内容溢出 */
+      .leftTitle {
+        position: relative;
+        color: #fff;
+        text-align: center;
+        line-height: 30px;
+        font-size: 18px;
+        background: url("../../assets/images/lefttitle-bg.png") no-repeat;
+        background-size: 100% 100%;
+        .imgLeft {
+          position: absolute;
+          right: 10px;
+          top: 5px;
+          cursor: pointer;
+        }
+      }
+      &.collapsed {
+        width: 63px !important;
+
+        .leftTitle {
+          padding: 0 5px;
+
+          .imgLeft {
+            position: static;
+            margin: 5px auto;
+          }
+        }
+      }
+      .leftMenu {
+        width: 100%;
+        height: 100%;
+      }
+      .leftTitle {
+        width: 100%;
+        height: 30px;
+      }
+    }
+    .contentRight {
+      flex: 1;
+      // width: calc(90% - 10px);
+      height: 100%;
+      margin-left: 10px;
+      background: #ccc;
+      &.expanded {
+        margin-left: 73px; /* 63px + 10px */
+      }
+    }
+  }
+}
+</style>
+<style>
+.contentLeft .el-menu {
   height: 100%;
+  background: rgb(113, 184, 252);
+}
+.contentLeft .el-sub-menu__title,
+.contentLeft .el-menu-item {
+  color: #fff;
+}
+.contentLeft .el-menu-item.is-active {
+  background-color: rgb(93, 171, 255) !important;
+  color: #fff !important;
+}
+
+.contentLeft .el-menu .el-menu-item:hover,
+.contentLeft .el-menu .el-sub-menu__title:hover {
+  background-color: rgb(93, 171, 255) !important;
 }
-</style>
+</style>