界面UI、路由跳转构建

src/components/TopNav/index.vue

@@ -5,14 +5,22 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item
+        :style="{ '--theme': theme }"
+        :index="item.path"
+        :key="index"
+        v-if="index < visibleNumber"
         ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu
+      :style="{ '--theme': theme }"
+      index="more"
+      v-if="topMenus.length > visibleNumber"
+    >
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
@@ -31,7 +39,7 @@
 import { constantRoutes } from "@/router";
 
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ["/index", "/user/profile"];
 
 export default {
   data() {
@@ -39,7 +47,7 @@ export default {
       // 顶部栏初始数
       visibleNumber: 5,
       // 当前激活菜单的 index
-      currentIndex: undefined
+      currentIndex: undefined,
     };
   },
   computed: {
@@ -53,9 +61,9 @@ export default {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
           if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+            topMenus.push(menu.children[0]);
           } else {
-              topMenus.push(menu);
+            topMenus.push(menu);
           }
         }
       });
@@ -71,11 +79,12 @@ export default {
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
+            if (router.path === "/") {
               router.children[item].path = "/" + router.children[item].path;
             } else {
-              if(!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path =
+                  router.path + "/" + router.children[item].path;
               }
             }
             router.children[item].parentPath = router.path;
@@ -89,23 +98,27 @@ export default {
     activeMenu() {
       const path = this.$route.path;
       let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+      if (
+        path !== undefined &&
+        path.lastIndexOf("/") > 0 &&
+        hideList.indexOf(path) === -1
+      ) {
         const tmpPath = path.substring(1, path.length);
         activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-        this.$store.dispatch('app/toggleSideBarHide', false);
-      } else if(!this.$route.children) {
+        this.$store.dispatch("app/toggleSideBarHide", false);
+      } else if (!this.$route.children) {
         activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       }
       this.activeRoutes(activePath);
       return activePath;
     },
   },
   beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
+    window.addEventListener("resize", this.setVisibleNumber);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
+    window.removeEventListener("resize", this.setVisibleNumber);
   },
   mounted() {
     this.setVisibleNumber();
@@ -119,18 +132,18 @@ export default {
     // 菜单选择事件
     handleSelect(key, keyPath) {
       this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      const route = this.routers.find((item) => item.path === key);
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
         window.open(key, "_blank");
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
         this.$router.push({ path: key });
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       } else {
         // 显示左侧联动菜单
         this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.$store.dispatch("app/toggleSideBarHide", false);
       }
     },
     // 当前激活的路由
@@ -143,13 +156,13 @@ export default {
           }
         });
       }
-      if(routes.length > 0) {
+      if (routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       }
     },
     ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
-    }
+      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
+    },
   },
 };
 </script>
@@ -164,9 +177,10 @@ export default {
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 2px solid #{'var(--theme)'} !important;
-  color: #303133;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border: none !important;
+  color: white;
 }
 
 /* submenu item */

src/router/index.js

@@ -47,6 +47,11 @@ export const constantRoutes = [{
         component: () =>
             import ('@/views/cockpit'),
         hidden: true
+    }, {
+        path: '/checkmodel',
+        component: () =>
+            import ('@/views/checkmodel'),
+        hidden: true
     }]
 }, {
     path: '/login',

src/views/checkmodel.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="checkmodel">
+    <div class="innerContainer leftPane">三维报建</div>
+    <div class="innerContainer rightPane">开工啦</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "checkmodel",
+  data() {
+    return {};
+  },
+  created() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.checkmodel {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.innerContainer {
+  width: 350px;
+  height: calc(100% - 20px);
+  position: absolute;
+  background: #041024;
+  z-index: 99;
+  top: 10px;
+  writing-mode: vertical-lr;
+  text-align: center;
+  font-size: 73px;
+  line-height: 350px;
+  color: red;
+}
+
+.leftPane {
+  left: 10px;
+}
+
+.rightPane {
+  right: 10px;
+}
+</style>

src/views/map3d.vue

@@ -1,17 +1,58 @@
 <template>
   <div id="app">
     <div class="header">
-      <div class="menuClass">
-        <div
+      <div class="menuClass" id="menuClass">
+        <!-- <div
           v-for="(item, index) in menu"
           :key="index"
           :class="activeMenuId == index ? 'activemenu' : 'menu'"
           @click="chooseMenu(item, index)"
         >
           {{ item.title }}
-        </div>
-      </div>
+        </div> -->
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleMenuSelect"
+          background-color="rgb(4,16,36)"
+          text-color="white"
+          active-text-color="white"
+        >
+          <template v-for="(item, index) in menu">
+            <el-menu-item v-if="!item.children" :index="item.path">{{
+              item.title
+            }}</el-menu-item>
+            <el-submenu
+              :index="index"
+              v-if="item.children && item.children.length > 0"
+            >
+              <template slot="title">{{ item.title }}</template>
 
+              <template v-for="(subitem, subindex) in item.children">
+                <el-menu-item
+                  v-if="!subitem.children"
+                  popper-class="el-menu-item-popper"
+                  :index="subitem.path"
+                  >{{ subitem.title }}</el-menu-item
+                >
+                <el-submenu
+                  :index="index + '-' + subindex"
+                  v-if="subitem.children && subitem.children.length > 0"
+                >
+                  <template slot="title">{{ subitem.title }}</template>
+                  <el-menu-item
+                    :index="submenu.path"
+                    v-for="(submenu, sunindex) in subitem.children"
+                    :key="sunindex"
+                    >{{ submenu.title }}</el-menu-item
+                  >
+                </el-submenu>
+              </template>
+            </el-submenu>
+          </template>
+        </el-menu>
+      </div>
       <div class="systemTitle">海南省国土空间智慧治理试点</div>
       <tool-bar></tool-bar>
       <div class="timeline">
@@ -34,6 +75,7 @@ export default {
   data() {
     return {
       menu: [],
+      activeIndex: 0,
       formattedText: "",
       formattedTime: "",
       activeMenuId: 0,
@@ -51,6 +93,9 @@ export default {
     this.updateTime();
   },
   methods: {
+    handleMenuSelect(item) {
+      this.$router.push({ path: item });
+    },
     updateTime() {
       let s = new Date().toLocaleString().split(" ");
       this.formattedText = s[0];
@@ -67,18 +112,21 @@ export default {
     GetRouters() {
       getRouters().then((res) => {
         this.menu = res.data[0].children;
-        console.log(this.menu);
+        // console.log(this.menu);
         let curRouter = this.$router.currentRoute.path;
         if (curRouter == "/") {
+          this.activeIndex = this.menu[0].path;
           this.$router.push({ path: this.menu[0].path });
         } else {
-          for (let i = 0; i < this.menu.length; i++) {
-            if (this.menu[i].path == curRouter) {
-              this.activeMenuId = i;
-              this.$router.push({ path: this.menu[i].path });
-              break;
-            }
-          }
+          this.activeIndex = curRouter;
+          this.$router.push({ path: curRouter });
+          // for (let i = 0; i < this.menu.length; i++) {
+          //   if (this.menu[i].path == curRouter) {
+          //     this.activeMenuId = i;
+          //     this.$router.push({ path: this.menu[i].path });
+          //     break;
+          //   }
+          // }
         }
       });
     },
@@ -100,8 +148,6 @@ export default {
 </script>
 
 <style scoped>
-#app {
-}
 .routerContainer {
   position: absolute;
   width: 100%;
@@ -133,7 +179,7 @@ export default {
 }
 .menuClass {
   position: absolute;
-  left: 84px;
+  left: 40px;
   font-size: 14px;
   height: 32px;
   top: 20px;
@@ -191,4 +237,86 @@ export default {
   top: -62px;
   font-size: 19px;
 }
+
+.el-menu-demo {
+  border: none !important;
+  height: 100%;
+  background-color: transparent;
+}
+
+.el-menu-item {
+  background-image: url("/static/images/overview/menu.png");
+  background-size: 100% 100%;
+  float: left;
+  height: 37px;
+  line-height: 43px !important;
+  margin: 0;
+  border: none;
+  color: white;
+  width: 120px;
+}
+
+.el-menu-item:hover {
+  font-weight: bold;
+  color: white !important;
+}
+
+.el-submenu,
+.is-opend {
+  background-image: url("/static/images/overview/menu.png");
+  background-size: 100% 100%;
+  height: 37px;
+  line-height: 43px !important;
+  margin: 0;
+  border: none;
+  color: white;
+  width: 120px;
+}
+
+.el-menu--popup .el-submenu {
+  width: 100% !important;
+}
+
+.el-submenu:hover {
+  font-weight: bold;
+  color: white !important;
+}
+
+.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu-item.is-active,
+.el-submenu.is-active {
+  background-image: url("/static/images/overview/menuactive.png");
+  background-size: 100% 100%;
+}
+
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border: none !important;
+  color: white !important;
+}
+
+.el-submenu__title {
+  height: 39px !important;
+  line-height: 43px !important;
+  border: none !important;
+  color: white !important;
+}
+
+/deep/ .el-menu-item.is-active,
+/deep/.el-submenu.is-active,
+/deep/ .el-submenu.is-active,
+/deep/.el-submenu__title {
+  border: none;
+  color: white;
+}
+
+/deep/ .el-menu-item,
+/deep/ .el-submenu__title,
+/deep/ .is-opened {
+  height: 37px !important;
+  line-height: 43px !important;
+  color: white !important;
+  background-color: transparent !important;
+  border: none !important;
+  text-align: center !important;
+}
 </style>

src/views/overview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="overview">
-    <div class="innerContainer leftPane"></div>
-    <div class="innerContainer rightPane"></div>
+    <div class="innerContainer leftPane">驾驶舱</div>
+    <div class="innerContainer rightPane">开工啦</div>
   </div>
 </template>
 
@@ -30,6 +30,11 @@ export default {
   background: #041024;
   z-index: 99;
   top: 10px;
+  writing-mode: vertical-lr;
+  text-align: center;
+  font-size: 73px;
+  line-height: 350px;
+  color: red;
 }
 
 .leftPane {