修改

src/page/index/index.vue

@@ -4,32 +4,25 @@
       <!-- 顶部导航栏 -->
       <top ref="top" />
     </div>
-    <div class="avue-layout" style="background-color: #042352;" v-if="menuShow">
+
+    <div class="avue-layout" style="background-color: #042352;">
       <!-- 左侧导航栏 -->
-      <div class="avue-left">
+      <div class="animate__animated avue-left animate__faster"
+        :class="menuIndex == 0 ? 'animate__bounceOutLeft' : 'animate__bounceInLeft'">
         <sidebar />
       </div>
-      <div class="avue-main">
+      <div class="avue-main" :style="menuIndex == 0 ?'left: 0;width: 100%;height: calc(100vh - 10rem);':''">
         <!-- 顶部标签卡 -->
-        <tags />
-        <transition name="fade-scale">
-          <search class="avue-view" v-show="isSearch"></search>
-        </transition>
-        <!-- 主体视图层 -->
-        <div style="height:100%;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
-          <keep-alive>
-            <router-view class="avue-view" v-if="$route.meta.keepAlive" />
-          </keep-alive>
-          <router-view class="avue-view" v-if="!$route.meta.keepAlive" />
+        <div v-show="menuIndex != 0">
+          <tags />
+          <transition name="fade-scale">
+            <search class="avue-view" v-show="isSearch"></search>
+          </transition>
         </div>
-      </div>
-    </div>
-
 
-    <div class="avue-layout" style="background-color: #042352;" v-else>
-      <div class="avue-main" style="left: 0;width: 100%;height: calc(100vh - 10rem);">
         <!-- 主体视图层 -->
-        <div style="height: calc(100vh - 10rem);overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
+        <div style="height:100%;overflow-y:auto;overflow-x:hidden;"
+          :style="menuIndex == 0 ?'height: calc(100vh - 10rem);':''" id="avue-view" v-show="!isSearch">
           <keep-alive>
             <router-view class="avue-view" v-if="$route.meta.keepAlive" />
           </keep-alive>
@@ -37,6 +30,7 @@
         </div>
       </div>
     </div>
+
     <!-- <div class="avue-shade" @click="showCollapse"></div> -->
   </div>
 </template>
@@ -89,27 +83,16 @@
       this.refreshToken();
     },
     mounted() {
-      this.showMenu()
       this.init();
     },
-    computed: mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu"]),
+    computed: mapGetters(["isMenu", "menuIndex", "isLock", "isCollapse", "website", "menu"]),
     props: [],
     methods: {
       showCollapse() {
         this.$store.commit("SET_COLLAPSE");
       },
-      showMenu() {
-        let path = '/wel/index'
-        if (this.$route.path == path) {
-          this.menuShow = false
-        } else {
-          this.menuShow = true
-        }
-      },
       // 初始化
       init() {
-        console.error(this.$route.path, "123456");
-
         this.$store.commit("SET_SCREEN", admin.getScreen());
         window.onresize = () => {
           setTimeout(() => {

src/page/index/tags.vue

@@ -1,38 +1,23 @@
 <template>
-  <div class="avue-tags"
-       v-if="showTag">
+  <div class="avue-tags" v-if="showTag">
     <!-- tag盒子 -->
-    <div v-if="contextmenuFlag"
-         class="avue-tags__contentmenu"
-         :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
-      <div class="item"
-           @click="clearCacheTags">{{$t('tagsView.clearCache')}}
+    <div v-if="contextmenuFlag" class="avue-tags__contentmenu" :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
+      <div class="item" @click="clearCacheTags">{{$t('tagsView.clearCache')}}
       </div>
-      <div class="item"
-           @click="closeOthersTags">{{$t('tagsView.closeOthers')}}
+      <div class="item" @click="closeOthersTags">{{$t('tagsView.closeOthers')}}
       </div>
-      <div class="item"
-           @click="closeAllTags">{{$t('tagsView.closeAll')}}
+      <div class="item" @click="closeAllTags">{{$t('tagsView.closeAll')}}
       </div>
     </div>
-    <div class="avue-tags__box"
-         :class="{'avue-tags__box--close':!website.isFirstPage}">
-      <el-tabs v-model="active"
-               type="card"
-               @contextmenu.native="handleContextmenu"
-               :closable="tagLen!==1"
-               @tab-click="openTag"
-               @edit="menuTag">
-        <el-tab-pane :key="item.value"
-                     v-for="item in tagList"
-                     :label="generateTitle(item)"
-                     :name="item.value">
+    <div class="avue-tags__box" :class="{'avue-tags__box--close':!website.isFirstPage}">
+      <el-tabs v-model="active" type="card" @contextmenu.native="handleContextmenu" :closable="tagLen!==1"
+        @tab-click="openTag" @edit="menuTag">
+        <el-tab-pane :key="item.value" v-for="item in tagList" :label="generateTitle(item)" :name="item.value">
         </el-tab-pane>
 
       </el-tabs>
       <el-dropdown class="avue-tags__menu">
-        <el-button type="primary"
-                   size="mini">
+        <el-button type="primary" size="mini">
           {{$t('tagsView.menu')}}
           <i class="el-icon-arrow-down el-icon--right"></i>
         </el-button>
@@ -48,8 +33,13 @@
   </div>
 </template>
 <script>
-  import {mapGetters, mapState} from "vuex";
-  import {clearCache} from "@/api/user";
+  import {
+    mapGetters,
+    mapState
+  } from "vuex";
+  import {
+    clearCache
+  } from "@/api/user";
 
   export default {
     name: "tags",
@@ -61,8 +51,7 @@
         contextmenuFlag: false
       };
     },
-    created() {
-    },
+    created() {},
     mounted() {
       this.setActive();
     },
@@ -75,7 +64,7 @@
       }
     },
     computed: {
-      ...mapGetters(["tagWel", "tagList", "tag", "website"]),
+      ...mapGetters(["tagWel", "tagList", "tag", "website", "menuIndex"]),
       ...mapState({
         showTag: state => state.common.showTag
       }),
@@ -120,7 +109,10 @@
       },
       menuTag(value, action) {
         if (action === "remove") {
-          let {tag, key} = this.findTag(value);
+          let {
+            tag,
+            key
+          } = this.findTag(value);
           this.$store.commit("DEL_TAG", tag);
           if (tag.value === this.tag.value) {
             tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
@@ -155,7 +147,10 @@
             key = index;
           }
         });
-        return {tag: tag, key: key};
+        return {
+          tag: tag,
+          key: key
+        };
       },
       closeAllTags() {
         this.contextmenuFlag = false;
@@ -182,5 +177,3 @@
     }
   };
 </script>
-
-

src/page/index/top/top-menu.vue

@@ -2,9 +2,10 @@
   <div>
     <div class="tab-left">
       <div @click="menuClick(item,index)" v-for="(item,index) in items" :key="index">
-        <div :class="activeIndex==item.index?'selected':''" class="tabName" style="margin-right: 1.875rem;">
+        <div :class="menuIndex == index?'selected animate__heartBeat':''" class="tabName animate__animated"
+          style="margin-right: 1.875rem;">
           <span>{{generateTitle(item)}}</span>
-          <img v-if="activeIndex==index" src="/img/icon/top-selected.png" class="tab-bottom" />
+          <img v-if="menuIndex == index" src="/img/icon/top-selected.png" class="tab-bottom" />
           <div v-else class="tab-bottom"></div>
         </div>
       </div>
@@ -16,7 +17,6 @@
   import {
     mapGetters
   } from "vuex";
-
   export default {
     name: "top-menu",
     data() {
@@ -25,27 +25,25 @@
           name: '首页',
           source: 'el-icon-menu',
         },
-        activeIndex: "0",
         items: [],
       };
     },
     inject: ["index"],
     created() {
+
       this.getMenu();
     },
     computed: {
-      ...mapGetters(["tagCurrent", "menu"])
+      ...mapGetters(["tagCurrent", "menu","menuIndex"])
     },
     methods: {
       menuClick(item, index) {
-        this.activeIndex = index
+        this.$store.commit('SET_MENU_INDEX',index)
         if (index == 0) {
-          this.$router.push({path: "/wel/index"})
-          // this.openHome(this.itemHome)
+          this.openHome(this.itemHome)
         } else {
           this.openMenu(item)
         }
-        this.$forceUpdate()
       },
       openHome(itemHome) {
         // this.index.openMenu(itemHome);

src/router/views/index.js

@@ -1,127 +1,126 @@
 import Layout from '@/page/index/'
-export default [
-  {
-  path: '/wel',
-  component: Layout,
-  redirect: '/wel/index',
-  children: [{
-    path: 'index',
-    name: '首页',
-    meta: {
-      i18n: 'dashboard'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/wel/index')
+export default [{
+    path: '/wel',
+    component: Layout,
+    redirect: '/wel/index',
+    children: [{
+      path: 'index',
+      name: '首页',
+      meta: {
+        i18n: 'dashboard'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/wel/index')
+    }, {
+      path: 'dashboard',
+      name: '控制台',
+      meta: {
+        i18n: 'dashboard',
+        menu: false,
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
+    }]
   }, {
-    path: 'dashboard',
-    name: '控制台',
-    meta: {
-      i18n: 'dashboard',
-      menu: false,
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/wel/dashboard')
-  }]
-}, {
-  path: '/test',
-  component: Layout,
-  redirect: '/test/index',
-  children: [{
-    path: 'index',
-    name: '测试页',
-    meta: {
-      i18n: 'test'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/test')
-  }]
-}, 
-// {
-//   path: '/editor',
-//   component: Layout,
-//   children: [{
-//     path: 'scene',
-//     name: '3D场景设计器',
-//     component: () =>
-//       import( /* webpackChunkName: "views" */ '@/views/editor/editor')
-//   }]
-// },
-{
-  path: '/dict-horizontal',
-  component: Layout,
-  redirect: '/dict-horizontal/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
-  }]
-}, {
-  path: '/dict-vertical',
-  component: Layout,
-  redirect: '/dict-vertical/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
-  }]
-}, {
-  path: '/info',
-  component: Layout,
-  redirect: '/info/index',
-  children: [{
-    path: 'index',
-    name: '个人信息',
-    meta: {
-      i18n: 'info'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
-  }]
-}, {
-  path: '/work/process/leave',
-  component: Layout,
-  redirect: '/work/process/leave/form',
-  children: [{
-    path: 'form/:processDefinitionId',
-    name: '请假流程',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
+    path: '/test',
+    component: Layout,
+    redirect: '/test/index',
+    children: [{
+      path: 'index',
+      name: '测试页',
+      meta: {
+        i18n: 'test'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/test')
+    }]
+  },
+  // {
+  //   path: '/editor',
+  //   component: Layout,
+  //   children: [{
+  //     path: 'scene',
+  //     name: '3D场景设计器',
+  //     component: () =>
+  //       import( /* webpackChunkName: "views" */ '@/views/editor/editor')
+  //   }]
+  // },
+  {
+    path: '/dict-horizontal',
+    component: Layout,
+    redirect: '/dict-horizontal/index',
+    children: [{
+      path: 'index',
+      name: '字典管理',
+      meta: {
+        i18n: 'dict'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
+    }]
   }, {
-    path: 'handle/:taskId/:processInstanceId/:businessId',
-    name: '处理请假流程',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
+    path: '/dict-vertical',
+    component: Layout,
+    redirect: '/dict-vertical/index',
+    children: [{
+      path: 'index',
+      name: '字典管理',
+      meta: {
+        i18n: 'dict'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
+    }]
   }, {
-    path: 'detail/:processInstanceId/:businessId',
-    name: '请假流程详情',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
+    path: '/info',
+    component: Layout,
+    redirect: '/info/index',
+    children: [{
+      path: 'index',
+      name: '个人信息',
+      meta: {
+        i18n: 'info'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
+    }]
   }, {
-    path: '/work/process/publicEvent/detail/:processInstanceId/:businessId',
-    name: '报事工单详情',
-    meta: {
-      i18n: 'work'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/detail')
-  },{
+    path: '/work/process/leave',
+    component: Layout,
+    redirect: '/work/process/leave/form',
+    children: [{
+      path: 'form/:processDefinitionId',
+      name: '请假流程',
+      meta: {
+        i18n: 'work'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
+    }, {
+      path: 'handle/:taskId/:processInstanceId/:businessId',
+      name: '处理请假流程',
+      meta: {
+        i18n: 'work'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
+    }, {
+      path: 'detail/:processInstanceId/:businessId',
+      name: '请假流程详情',
+      meta: {
+        i18n: 'work'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
+    }, {
+      path: '/work/process/publicEvent/detail/:processInstanceId/:businessId',
+      name: '报事工单详情',
+      meta: {
+        i18n: 'work'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/detail')
+    }, {
       path: '/work/process/publicEvent/form/:processDefinitionId',
       name: '报事工单上报事件',
       meta: {
@@ -130,5 +129,5 @@ export default [
       component: () =>
         import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/form')
     }]
-}
+  }
 ]

src/store/getters.js

@@ -12,6 +12,7 @@ const getters = {
   isLock: state => state.common.isLock,
   isFullScren: state => state.common.isFullScren,
   isMenu: state => state.common.isMenu,
+  menuIndex: state => state.common.menuIndex,
   lockPasswd: state => state.common.lockPasswd,
   tagList: state => state.tags.tagList,
   tagWel: state => state.tags.tagWel,

src/views/wel/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full" style="overflow: hidden;">
+  <div class="full animate__animated animate__faster"  :class="menuIndex == 0 ? 'animate__bounceInLeft' : 'animate__bounceOutLeft'" style="overflow: hidden;" >
     <!--  背景--3D场景   -->
     <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
       @loadingFinish="initScene">
@@ -23,6 +23,9 @@
 </template>
 
 <script>
+  import {
+    mapGetters
+  } from "vuex";
   import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
   import mpDialog from "../../components/mp-dialog.vue"
   import TopBar from "../../components/3DScene/top-bar/top-bar";
@@ -50,6 +53,9 @@
       TopBar,
       ToolsBar,
     },
+    computed: {
+      ...mapGetters(["menuIndex"])
+    },
     data() {
       return {
         dialogDetail: {},
@@ -267,14 +273,14 @@
     },
     methods: {
       showInfoBox() {
-        this.toolsOption.forEach(item=> {
+        this.toolsOption.forEach(item => {
           if (item.name == '信息框') {
-            if (item.icon=='/img/tools/full.png') {
-               item.icon='/img/tools/full-out.png'
-            }else{
-              item.icon='/img/tools/full.png'
+            if (item.icon == '/img/tools/full.png') {
+              item.icon = '/img/tools/full-out.png'
+            } else {
+              item.icon = '/img/tools/full.png'
             }
-            console.log(item,"123");
+            console.log(item, "123");
             this.$forceUpdate()
           }
         })