Skip to content

D
donkey
Commit b81c9fce authored by caicaicai's avatar caicaicai
Browse files
Options

主页菜单栏以及路由

parent d7ff9e5e
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 27 deletions
src/router/index.js
View file @ b81c9fce
......@@ -2,6 +2,8 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '../views/login.vue'
import homepage from "../views/homepage.vue";
import mineMonitoring from '../views/mineMonitoring.vue'
import videoSurveillance from '../views/videoSurveillance.vue'
Vue.use(VueRouter)
......@@ -15,7 +17,16 @@ const routes = [
{
path: '/homepage',
name: 'homepage',
component: homepage
component: homepage,
children: [
{
path: '/homepage/mineMonitoring',
component: mineMonitoring
},{
path: '/homepage/videoSurveillance',
component: videoSurveillance
},
]
},
// {
// path: '/about',
......@@ -25,11 +36,11 @@ const routes = [
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// },
{
name: 'default',
path: '*',
redirect: '/login'
}
// {
// name: 'default',
// path: '*',
// redirect: '/login'
// }
]
const router = new VueRouter({
......
src/views/homepage.vue
View file @ b81c9fce
......@@ -5,7 +5,7 @@
<div class="userInformationBar">
<div>
<span>用户权限</span>
<span class="iconfont icon-xiajiantou" style="font-size:18px;"></span>
<span class="iconfont icon-xiajiantou xiajiantou" style="font-size:18px;"></span>
</div>
<div>
<span>131313132</span>
......@@ -22,30 +22,82 @@
@open="handleOpen"
@close="handleClose"
background-color="rgb(9, 26, 69)"
text-color="#fff"
active-text-color="#ffd04b"
text-color="rgb(3,156,205)"
active-text-color="white"
:unique-opened="true"
:router="true"
>
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<span slot="title">导航一</span>
<el-menu-item index="/homepage/mineMonitoring">
<i class="el-icon-menu"></i>
<span slot="title">矿区监控</span>
</el-menu-item>
<el-menu-item index="/homepage/videoSurveillance">
<i class="el-icon-menu"></i>
<span slot="title">视频监控</span>
</el-menu-item>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航二</span>
</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>生产自动化系统</span>
</template>
<el-menu-item index="3_1">系统首页</el-menu-item>
<el-menu-item index="3_2">实时数据</el-menu-item>
<el-menu-item index="3_3">历史数据</el-menu-item>
<el-menu-item index="3_4">报警记录</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title">
<i class="el-icon-location"></i>
<span>生产报表系统</span>
</template>
<el-menu-item index="4_1">系统首页</el-menu-item>
<el-menu-item index="4_2">实时数据</el-menu-item>
<el-menu-item index="3_3">历史数据</el-menu-item>
</el-submenu>
<el-menu-item index="5">
<i class="el-icon-menu"></i>
<span slot="title">人员定位系统</span>
</el-menu-item>
<el-menu-item index="6">
<i class="el-icon-menu"></i>
<span slot="title">车辆定位系统</span>
</el-menu-item>
<el-submenu index="7">
<template slot="title">
<i class="el-icon-location"></i>
<span>边坡在线监测</span>
</template>
<el-menu-item index="7_1">系统首页</el-menu-item>
<el-menu-item index="7_2">实时数据</el-menu-item>
<el-menu-item index="7_3">历史数据</el-menu-item>
<el-menu-item index="7_4">报警记录</el-menu-item>
</el-submenu>
<el-submenu index="8">
<template slot="title">
<i class="el-icon-location"></i>
<span>环境在线监测</span>
</template>
<el-menu-item index="8_1">系统首页</el-menu-item>
<el-menu-item index="8_2">实时数据</el-menu-item>
<el-menu-item index="8_3">历史数据</el-menu-item>
<el-menu-item index="8_4">报警记录</el-menu-item>
</el-submenu>
<el-menu-item index="9">
<i class="el-icon-menu"></i>
<span slot="title">数字化储量管理</span>
</el-menu-item>
<el-menu-item index="10">
<i class="el-icon-menu"></i>
<span slot="title">门禁系统</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
<router-view></router-view>
<div class="rightBody">
<router-view></router-view>
</div>
</div>
</div>
......@@ -60,10 +112,8 @@ export default {
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleId(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
......@@ -106,9 +156,30 @@ export default {
.mainBody{
height: 100vh;
overflow: hidden;
display: flex;
}
.rightBody{
width: 100%;
height: 100%;
}
.leftMenuBar>.tac>.el-col>ul{
width: 240px;
height: 100vh;
font-size: 18px;
letter-spacing: 2px;
font-weight: 600;
}
.el-menu-item{
height: 50px;
line-height: 50px;
}
.el-submenu{
min-height: 50px;
line-height: 50px;
}
.xiajiantou{
display: inline-block;
width: 18px;
height: 18px;
}
</style>
\ No newline at end of file
src/views/login.vue
View file @ b81c9fce
......@@ -89,7 +89,7 @@ export default {
}
})
})
this.$router.push({path: 'homepage',query:{ index:this.userName}});
this.$router.push({path: 'homepage/mineMonitoring',query:{ index:this.userName}});
}
}
}
......
src/views/mineMonitoring.vue 0 → 100644
View file @ b81c9fce
<template>
<div class="allBox">
<div class="intelligentDispatch">
<div></div>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.allBox{
background-image: url("../imgs/5dd5481bb9102.png");
width: 100%;
height: 100%;
position: relative;
}
</style>
\ No newline at end of file
src/views/videoSurveillance.vue 0 → 100644
View file @ b81c9fce
<template>
<div>Video surveillance</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment