二级菜单

2023-05-30 14:04:57 +08:00
parent 9c741c940e
commit f55fecbbee
15 changed files with 193 additions and 98 deletions
--- a/src/pages/modules/errormanage/ErrorDeal.vue
+++ b/src/pages/modules/errormanage/ErrorDeal.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <div class="main-container">
    <div class="con1">
      <div class="desc">当前状态</div>
      <div class="status"></div>
@@ -27,7 +27,7 @@
        <span class="txt">{{dataInfo.task_num}}</span>
      </div>
    </div>
-  </section>
+  </div>
 </template>

 <script>
--- a/src/pages/modules/errormanage/ErrorInfo.vue
+++ b/src/pages/modules/errormanage/ErrorInfo.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="tasklist">
    <div class="con1">
      <table class="filter-table">
@@ -20,6 +21,7 @@
      </table>
    </div>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/home/home.vue
+++ b/src/pages/modules/home/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <div class="main-container">
    <div class="con1">
      <button v-if="dataInfo.button_name" @click="clickSave">{{dataInfo.button_name}}</button>
    </div>
@@ -35,7 +35,7 @@
        <span class="txt">{{dataInfo.agv_error}}</span>
      </div>
    </div>
-  </section>
+  </div>
 </template>

 <script>
--- a/src/pages/modules/login/login.vue
+++ b/src/pages/modules/login/login.vue
@@ -125,7 +125,7 @@ export default {
        let obj = {}
        obj = Object.assign({}, res)
        this.$store.dispatch('userInfo', JSON.stringify(obj))
-        this.$router.push('/homehome')
+        this.$router.push('/index/home')
      } catch (err) {
        this.disabled = false
      }
--- a/src/pages/modules/systemmanage/developer.vue
+++ b/src/pages/modules/systemmanage/developer.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="tabs_container">
      <div class="tabs_header">
@@ -20,6 +21,7 @@
      </div>
    </div>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/systemmanage/role.vue
+++ b/src/pages/modules/systemmanage/role.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
@@ -77,6 +78,7 @@
    <div v-if="type === '3'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/systemmanage/system.vue
+++ b/src/pages/modules/systemmanage/system.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
@@ -72,6 +73,7 @@
    <div v-if="type === '3'" class="form_wraper">确定删除吗？</div>
    </jxDialog>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/systemmanage/user.vue
+++ b/src/pages/modules/systemmanage/user.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="buttons_wrapper">
      <div class="row">
@@ -101,6 +102,7 @@
    <div v-if="type === '4'" class="form_wraper">确定删除该用户吗？</div>
    </jxDialog>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/taskmanage/CarryPoint.vue
+++ b/src/pages/modules/taskmanage/CarryPoint.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="movepoint">
    <div class="con">
      <div class="box1">
@@ -12,6 +13,7 @@
      </div>
    </div>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/taskmanage/TaskLists.vue
+++ b/src/pages/modules/taskmanage/TaskLists.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <div class="main-container">
    <div class="clear">
      <!-- <div class="fl left_side">
        <site-nav default_active="1" active="1-2"></site-nav>
@@ -25,7 +25,7 @@
        </table>
      </div>
    </div>
-  </section>
+  </div>
 </template>

 <script>
--- a/src/pages/modules/taskmanage/TaskOperates.vue
+++ b/src/pages/modules/taskmanage/TaskOperates.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <div class="main-container">
    <div class="clear">
      <!-- <div class="fl left_side">
        <test-nav :array="testData" @change="handleChange"></test-nav>
@@ -24,7 +24,7 @@
      </div>
    </div>
    <div class="modal"></div> -->
-  </section>
+  </div>
 </template>

 <script>
--- a/src/pages/modules/vehicleinformation/vehiclecontrol.vue
+++ b/src/pages/modules/vehicleinformation/vehiclecontrol.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="content_wrap_inner content_wrap_inner_1">
@@ -110,6 +111,7 @@
    </div>
    <div v-show="show" class="modal"></div>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/modules/vehicleinformation/vehiclestatus.vue
+++ b/src/pages/modules/vehicleinformation/vehiclestatus.vue
@@ -1,4 +1,5 @@
 <template>
+<div class="main-container">
  <div class="right_side">
    <div class="content_wrap">
      <div class="state_wrap">
@@ -77,6 +78,7 @@
      </div>
    </div>
  </div>
+</div>
 </template>

 <script>
--- a/src/pages/shells/index/index.vue
+++ b/src/pages/shells/index/index.vue
@@ -5,8 +5,8 @@
        <img src="../../../images/aio/logo_1.png" alt="诺力">
      </div>
      <div class="horizontal-menu-container">
-        <el-menu :default-active="$route.path" mode="horizontal" @select="handleSelect">
-          <el-menu-item :index="menu.router" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
+        <el-menu :default-active="$route.meta.jumpPath" mode="horizontal" @select="handleSelect">
+          <el-menu-item :index="menu.index" v-for="menu in menus" :key="menu.index">{{menu.label}}</el-menu-item>
        </el-menu>
      </div>
      <div class="header-wraper__right">
@@ -46,7 +46,14 @@
        </div>
      </div>
    </div>
-    <router-view></router-view>
+    <div class="body-conatiner">
+      <div v-show="$route.path !== '/index/teach'" class="side-bar-container">
+        <el-menu :default-active="$route.meta.guidePath" @select="handleSelectChild">
+          <el-menu-item :index="menu.index" v-for="menu in childmenus" :key="menu.index">{{menu.label}}</el-menu-item>
+        </el-menu>
+      </div>
+      <router-view></router-view>
+    </div>
    <jxDialog
    ref="child"
    title="修改密码"
@@ -98,27 +105,80 @@ export default {
      menus: [{
        label: '首页',
        index: '1',
-        router: '/homehome'
+        router: '',
+        children: [{
+          label: '首页',
+          index: '1',
+          router: '/index/home'
+        }]
      }, {
        label: '任务管理',
        index: '2',
-        router: '/CarryPoint'
+        router: '',
+        children: [{
+          label: '搬运站点',
+          index: '1',
+          router: '/index/carrypoint'
+        }, {
+          label: '任务列表',
+          index: '2',
+          router: '/index/tasklists'
+        }, {
+          label: '任务操作',
+          index: '3',
+          router: '/index/taskoperates'
+        }]
      }, {
        label: '故障管理',
        index: '3',
-        router: '/ErrorInfo'
+        router: '',
+        children: [{
+          label: '故障信息',
+          index: '1',
+          router: '/index/errorinfo'
+        }, {
+          label: '故障处理',
+          index: '2',
+          router: '/index/errordeal'
+        }]
      }, {
        label: '车辆信息',
        index: '4',
-        router: '/vehiclestatus'
+        router: '',
+        children: [{
+          label: '车辆状态',
+          index: '1',
+          router: '/index/vehiclestatus'
+        }, {
+          label: '车辆控制',
+          index: '2',
+          router: '/index/vehiclecontrol'
+        }]
      }, {
        label: '示教',
        index: '5',
-        router: '/teach'
+        router: '/index/teach'
      }, {
        label: '系统管理',
        index: '6',
-        router: '/user'
+        router: '',
+        children: [{
+          label: '用户管理',
+          index: '1',
+          router: '/index/user'
+        }, {
+          label: '角色管理',
+          index: '2',
+          router: '/index/role'
+        }, {
+          label: '系统参数',
+          index: '3',
+          router: '/index/system'
+        }, {
+          label: '开发者选项',
+          index: '4',
+          router: '/index/developer'
+        }]
      }],
      dropdown: false,
      oldpassword: '',
@@ -127,6 +187,14 @@ export default {
      unclick: false
    }
  },
+  computed: {
+    routerPath () {
+      return this.$route.meta.jumpPath
+    },
+    childmenus () {
+      return this.menus[Number(this.$route.meta.jumpPath) - 1].children
+    }
+  },
  watch: {
    oldpassword (val) {
      if (val === '' || this.newpassword1 === '' || this.newpassword2 === '') {
@@ -150,11 +218,31 @@ export default {
      }
    }
  },
+  created () {
+    this.menus.map(el => {
+      if (el.router === this.$route.path) {
+        this.childmenus = el.children
+      }
+    })
+  },
  methods: {
    handleSelect (key) {
      this.dropdown = false
-      this.$router.push({
-        path: key
+      this.menus.map(el => {
+        if (el.router === '' && el.index === key) {
+          this.$router.push({ path: el.children[0].router })
+        }
+        if (key === '5') {
+          this.$router.push({ path: el.router })
+        }
+      })
+    },
+    handleSelectChild (key) {
+      this.dropdown = false
+      this.childmenus.map(el => {
+        if (el.index === key) {
+          this.$router.push({ path: el.router })
+        }
      })
    },
    showDropdown () {
@@ -235,9 +323,11 @@ export default {
  height 100%
  padding 0 10px
 >>>.el-menu--horizontal>.el-menu-item
-  line-height 79px
-  height 79px
+  line-height 80px
+  height 80px
  font-size 18px
+>>>.el-menu.el-menu--horizontal
+  border-bottom 0
 .time-container
  _fj()
 .state-item
@@ -296,9 +386,11 @@ export default {
 .header_dropdown_wraper
  position absolute
  top 90%
-  left 0
+  left 50%
+  transform translateX(-50%)
  z-index 1000
  width 100%
+  min-width 100px
  background-color #fff
  border 1px solid #ebeef5
  border-radius 4px
@@ -322,7 +414,8 @@ export default {
  border-width: 6px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.03))
  top: -6px;
-  left: 32px;
+  left: 50%;
+  transform: translateX(-6px)
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
@@ -339,6 +432,13 @@ export default {
    margin-left: -6px;
    border-top-width: 0;
    border-bottom-color: #fff;
+.side-bar-container
+    >>>.el-menu-item a
+        color #909399
+    >>>.is-active
+        background-color: #ecf5ff
+    >>>.is-active a
+        color #409EFF
@media only screen and (max-width: 1620px) {
 .title-container {
  width 150px
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,32 +7,27 @@ const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')

 const IndexComponent = r => require.ensure([], () => r(require('@page/shells/index/index.vue')), 'shells')

-const IndexHome = r => require.ensure([], () => r(require('@page/modules/home/index.vue')), 'modules')
-const HomeHome = r => require.ensure([], () => r(require('@page/modules/home/home.vue')), 'modules')
+const Home = r => require.ensure([], () => r(require('@page/modules/home/home.vue')), 'modules')

-const TaskManageTab = r => require.ensure([], () => r(require('@page/modules/taskmanage/index.vue')), 'modules')
 const CarryPoint = r => require.ensure([], () => r(require('@page/modules/taskmanage/CarryPoint.vue')), 'modules')
 const TaskLists = r => require.ensure([], () => r(require('@page/modules/taskmanage/TaskLists.vue')), 'modules')
 const TaskOperates = r => require.ensure([], () => r(require('@page/modules/taskmanage/TaskOperates.vue')), 'modules')

-const ErrorManageTab = r => require.ensure([], () => r(require('@page/modules/errormanage/index.vue')), 'modules')
 const ErrorInfo = r => require.ensure([], () => r(require('@page/modules/errormanage/ErrorInfo.vue')), 'modules')
 const ErrorDeal = r => require.ensure([], () => r(require('@page/modules/errormanage/ErrorDeal.vue')), 'modules')

-const VehicleInformation = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/index.vue')), 'modules')
 const VehicleStatus = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclestatus.vue')), 'modules')
 const VehicleControl = r => require.ensure([], () => r(require('@page/modules/vehicleinformation/vehiclecontrol.vue')), 'modules')

 const Teach = r => require.ensure([], () => r(require('@page/modules/teach/teach.vue')), 'modules')

-const SystemManage = r => require.ensure([], () => r(require('@page/modules/SystemManage/index.vue')), 'modules')
 const User = r => require.ensure([], () => r(require('@page/modules/SystemManage/user.vue')), 'modules')
 const Role = r => require.ensure([], () => r(require('@page/modules/SystemManage/role.vue')), 'modules')
 const System = r => require.ensure([], () => r(require('@page/modules/SystemManage/system.vue')), 'modules')
 const Developer = r => require.ensure([], () => r(require('@page/modules/SystemManage/developer.vue')), 'modules')

 // carry
-const Home = r => require.ensure([], () => r(require('@page/Home')), 'Home')
+// const Home = r => require.ensure([], () => r(require('@page/Home')), 'Home')
 const MovePoint = r => require.ensure([], () => r(require('@page/MovePoint')), 'MovePoint')
 const TaskList = r => require.ensure([], () => r(require('@page/TaskList')), 'TaskList')
 const TaskManage = r => require.ensure([], () => r(require('@page/TaskManage')), 'TaskManage')
@@ -73,75 +68,59 @@ export default new Router({
      path: '/index',
      component: IndexComponent,
      children: [{
-        path: '/indexhome',
-        component: IndexHome,
-        children: [{
-          path: '/homehome',
-          component: HomeHome
-        }]
-      },
-      {
-        path: '/TaskManageTab',
-        component: TaskManageTab,
-        children: [{
-          path: '/CarryPoint',
-          component: CarryPoint
-        }, {
-          path: '/TaskLists',
-          component: TaskLists
-        }, {
-          path: '/TaskOperates',
-          component: TaskOperates
-        }]
-      },
-      {
-        path: '/ErrorManageTab',
-        component: ErrorManageTab,
-        children: [{
-          path: '/ErrorInfo',
-          component: ErrorInfo
-        }, {
-          path: '/ErrorDeal',
-          component: ErrorDeal
-        }]
-      },
-      {
-        path: '/vehicleinformation',
-        component: VehicleInformation,
-        children: [{
-          path: '/vehiclestatus',
-          component: VehicleStatus
-        }, {
-          path: '/vehiclecontrol',
-          component: VehicleControl
-        }]
-      },
-      {
-        path: '/teach',
-        component: Teach
-      },
-      {
-        path: '/systemmanage',
-        component: SystemManage,
-        children: [{
-          path: '/user',
-          component: User
-        }, {
-          path: '/role',
-          component: Role
-        }, {
-          path: '/system',
-          component: System
-        }, {
-          path: '/developer',
-          component: Developer
-        }]
+        path: 'home',
+        component: Home,
+        meta: {jumpPath: '1', guidePath: '1'}
+      }, {
+        path: 'carrypoint',
+        component: CarryPoint,
+        meta: {jumpPath: '2', guidePath: '1'}
+      }, {
+        path: 'tasklists',
+        component: TaskLists,
+        meta: {jumpPath: '2', guidePath: '2'}
+      }, {
+        path: 'taskoperates',
+        component: TaskOperates,
+        meta: {jumpPath: '2', guidePath: '3'}
+      }, {
+        path: 'errorinfo',
+        component: ErrorInfo,
+        meta: {jumpPath: '3', guidePath: '1'}
+      }, {
+        path: 'errordeal',
+        component: ErrorDeal,
+        meta: {jumpPath: '3', guidePath: '2'}
+      }, {
+        path: 'vehiclestatus',
+        component: VehicleStatus,
+        meta: {jumpPath: '4', guidePath: '1'}
+      }, {
+        path: 'vehiclecontrol',
+        component: VehicleControl,
+        meta: {jumpPath: '4', guidePath: '2'}
+      }, {
+        path: 'teach',
+        component: Teach,
+        meta: {jumpPath: '5', guidePath: '1'}
+      }, {
+        path: 'user',
+        component: User,
+        meta: {jumpPath: '6', guidePath: '1'}
+      }, {
+        path: 'role',
+        component: Role,
+        meta: {jumpPath: '6', guidePath: '2'}
+      }, {
+        path: 'system',
+        component: System,
+        meta: {jumpPath: '6', guidePath: '3'}
+      }, {
+        path: 'developer',
+        component: Developer,
+        meta: {jumpPath: '6', guidePath: '4'}
      }]
    },
-    {
-      path: '/home',
-      component: Home
-    },
    {
      path: '/movepoint',
      component: MovePoint