添加首页页面

ruoyi-ui/package.json

@@ -29,6 +29,7 @@
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
+    "ol": "^10.6.1",
     "pinia": "3.0.2",
     "splitpanes": "4.0.4",
     "swiper": "^8.1.5",

ruoyi-ui/src/router/index.js

@@ -1,6 +1,7 @@
 import { createWebHistory, createRouter } from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
+import yjLayout from '@/views/YuJing/index.vue'
 
 /**
  * Note: 路由配置项
@@ -42,11 +43,6 @@ export const constantRoutes = [
     component: () => import('@/views/login'),
     hidden: true
   },
-  {
-    path: '/YuJing/index',
-    component: () => import('@/views/YuJing/index'),
-    hidden: true
-  },
   {
     path: '/register',
     component: () => import('@/views/register'),
@@ -75,6 +71,21 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/YuJing/index',
+    component: yjLayout,
+    hidden: true,
+    children: [
+      {
+        path: '/YuJing/shouye/index',
+        component: () => import('@/views/YuJing/shouye/index.vue'),
+      },
+      {
+        path: '/YuJing/transaction/dutyRecord',
+        component: () => import('@/views/YuJing/transaction/dutyRecord.vue'),
+      },
+    ]
+  },
   {
     path: '/user',
     component: Layout,

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

@@ -11,33 +11,51 @@
         >
           {{ item.name }}
         </div>
+        <el-dropdown @command="handleCommand" class="avatar-dropdown" trigger="hover">
+          <div class="avatar-wrapper">
+            <img src="@/assets/images/人像.png" class="user-avatar" />
+            <p class="user-nickname"> {{ userStore.nickName }} </p>
+            <img src="@/assets/images/down箭头.png" class="user-icon">
+          </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>
     </div>
     <div class="yjContent">
-      <div class="contentLeft" :class="{ collapsed: !leftItem }">
+      <div class="contentLeft" :class="{ collapsed: !leftItem}" v-show="showLeftMenu">
         <div class="leftMenu">
           <el-menu
-            default-active="2"
+            :default-active="currentRoute"
             class="el-menu-vertical-demo"
             :collapse="isCollapse"
+            @select="handleMenuSelect"
+            :router="true"
           >
             <div class="leftTitle">
-              <template v-if="leftItem == true"
-                >{{ menuLeftValue }}
+              <template v-if="leftItem">{{ menuLeftValue }}
                 <img
                   src="/src/assets/images/left.png"
                   alt=""
                   class="imgLeft"
-                  @click="imgLeftFn"
-              /></template>
+                  @click="imgLeftFn"/>
+              </template>
               <template v-else>
                 <img
                   src="/src/assets/images/right.png"
                   alt=""
-                  @click="imgLeftFn"
-              /></template>
+                  @click="imgLeftFn"/>
+              </template>
             </div>
-            <template v-for="item in menuData" :key="item.index">
+            <template v-for="item in menuData[menuLeftValue]" :key="item.index">
               <el-sub-menu v-if="item.children" :index="item.index">
                 <template #title>
                   <el-icon><component :is="item.icon" /></el-icon>
@@ -51,7 +69,6 @@
                   {{ 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>
@@ -60,56 +77,120 @@
           </el-menu>
         </div>
       </div>
-      <div class="contentRight" :class="{ collapsed: !leftItem }"></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>
     </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";
+import useUserStore from '@/store/modules/user'
+import {Setting} from "@element-plus/icons-vue";
+import { ElMessageBox } from 'element-plus'
+
+const routerInstance = useRouter();
+const userStore = useUserStore();
 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 currentRoute = ref('/');
+const showLeftMenu = ref(false);
+const menuList = ref([
+  { name: "首页", path: "/YuJing/shouye/index" },
+  { name: "值班管理",path: "/YuJing/transaction/dutyRecord" },
+  { name: "水功能区"}
 ]);
+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),
+    },
+  ]
+});
 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");
+}
+const menuValueFn = (val) => {
+  menuLeftValue.value = val.name;
+  // 点击首页时隐藏左侧菜单
+  showLeftMenu.value = val.name === "首页" ? false : true;
+  if (val.path) {
+    routerInstance.push(val.path);
+    currentRoute.value = 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);
+  currentRoute.value = 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">
@@ -145,6 +226,28 @@ function imgLeftFn() {
         width: 100px;
         cursor: pointer;
       }
+    .avatar-dropdown{
+      position: absolute;
+      right: 10px;
+      top: 2.5%;
+      .avatar-wrapper{
+        display: flex;
+        align-items: center;
+        .user-avatar{
+          width: 40px;
+          height: 40px;
+        }
+        .user-nickname{
+          font-size: 14px;
+          padding: 0 10px;
+          color: #fff;
+        }
+        .user-icon{
+          width: 17px;
+          height: 10px;
+        }
+      }
+    }
     }
   }
   .yjContent {
@@ -200,10 +303,9 @@ function imgLeftFn() {
     }
     .contentRight {
       flex: 1;
-      // width: calc(90% - 10px);
+      transition: margin-left 0.3s;
       height: 100%;
       margin-left: 10px;
-      background: #ccc;
       &.expanded {
         margin-left: 73px; /* 63px + 10px */
       }
@@ -214,7 +316,7 @@ function imgLeftFn() {
 <style>
 .contentLeft .el-menu {
   height: 100%;
-  background: rgb(113, 184, 252);
+  background: rgb(74, 147, 245);
 }
 .contentLeft .el-sub-menu__title,
 .contentLeft .el-menu-item {

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

@@ -0,0 +1,65 @@
+<template>
+  <div id="mapChart"></div>
+</template>
+
+<script setup name="BigscreenIndex">
+import {ElMessage} from 'element-plus';
+import 'ol/css';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from "ol/layer/Tile";
+import { XYZ, Vector as VectorSource } from 'ol/source.js';
+import VectorLayer from "ol/layer/Vector";
+import { LineString, Point } from "ol/geom";
+import { Icon, Style, Text,Circle } from 'ol/style';
+import Fill from "ol/style/Fill";
+import Feature from 'ol/Feature';
+import Stroke from "ol/style/Stroke";
+import Overlay from 'ol/Overlay';
+import { LinearRing } from "ol/geom";
+import { fromExtent } from "ol/geom/Polygon";
+
+const mapChart = ref(null);
+const mapCenter = ref([120.745, 31.120]);
+const mapZoom = ref(10.6);
+
+onMounted(() => {
+  initMap();
+});
+const initMap = () => { 
+  let vecLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  let cvaLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  mapChart.value= new Map({
+    target: 'mapChart',
+    view: new View({
+      center: mapCenter.value,
+      zoom: mapZoom.value,
+      minZoom: 3,
+      maxZoom: 16,
+      projection: 'EPSG:4326',
+    }),
+    layers: [vecLayer,cvaLayer],
+  });
+};
+</script>
+
+<style scoped lang="scss">
+#mapChart{
+  height: 100%;
+  width: 100%;
+}
+</style>

ruoyi-ui/src/views/YuJing/transaction/dutyRecord.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>值班记录</div>
+</template>

ruoyi-ui/src/views/index.vue

@@ -70,9 +70,6 @@ const slides = ref([
 ]);
 
 function handleSlideClick(slideData, index) {
-  console.log('slideData',
-    router.push(slideData.path));
-  
   if(slideData.path){
     router.push(slideData.path);
   }
@@ -155,7 +152,7 @@ function setLayout() {
     height: 64%;
     position: absolute;
     bottom: 3%;
-    left: 6.5%;
+    left: 5%;
     padding-top: 5%;
     .swiper-slide{
       .thj-swiper-card{
@@ -192,8 +189,8 @@ function setLayout() {
 .swiper-slide-prev {
 }
 .swiper-slide-active{
-  transform: scale(1.2);
   .thj-swiper-card{
+    transform: scale(1.2);
     background-image: url("../assets/images/矩形.png") !important;
   }
 }