Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1894abee by 任超
Options

style;权限

1 parent 0c7b3e5e
Inline Side-by-side
Showing 20 changed files with 256 additions and 333 deletions
......@@ -5,4 +5,4 @@ NODE_ENV=development
VUE_APP_BASE_API = '/api'
# 开发环境
VUE_APP_API_BASE_URL = 'http://192.168.2.38:8027'
VUE_APP_API_BASE_URL = 'http://192.168.2.38:8008'
......
......@@ -16,12 +16,14 @@ export default {
}
</script>
<style lang="scss" scoped>
.app-main {
height: calc(100vh - 84px);
overflow-x: hidden;
.hasTagsView {
.app-main {
overflow-x: auto;
padding: 5px;
box-sizing: border-box;
flex: 1;
width: 100%;
margin-right: 15px;
background-color: #EDF1F7;
box-sizing: border-box;
}
}
</style>
\ No newline at end of file
......
<template>
<div class="navbar-con">
<div class="navbar">
<div class="logo">
<img :src="require('@/image/logo.png')" alt="" />
</div>
<div class="backdrop">
<Breadcrumb />
<div class="sidebarLeft">
<sidebarLeft />
</div>
<div class="sidebarRight d-center">
<sidebarRight />
<div class="right-menu">
<div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
<div class="dataView pointer" @click="handleDataView">大屏展示</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
<div class="avatar-wrapper">
<span style="padding-right:10px">{{ name }}</span>
......@@ -22,14 +21,17 @@
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
import sidebarLeft from './Sidebar/sidebarLeft'
import sidebarRight from './Sidebar/sidebarRight'
import { mapGetters } from 'vuex'
export default {
components: {
Breadcrumb
sidebarLeft,
sidebarRight
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
......@@ -49,115 +51,70 @@ export default {
},
handleCommand (command) {
if (command == 'a') {
} else {
}
}
}
}
</script>
<style lang="scss" scoped>
.navbar-con {
position: relative;
/deep/.el-menu--horizontal {
display: flex;
align-items: center;
}
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
.menubg {
line-height: 30px;
color: #FFFFFF;
margin-right: 5px;
background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
}
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url('../../image/dp.png');
background-size: cover;
margin-right: 20px;
/deep/.el-menu-item {
@extend .menubg;
}
.NoticeBar {
position: absolute;
bottom: 0;
/deep/.el-submenu {
@extend .menubg;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
/deep/.el-submenu__title {
line-height: 30px !important;
height: 42px !important;
}
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
/deep/.el-submenu__title span {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
width: 140px;
height: 36px;
line-height: 36px;
}
}
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #EBEEF5;
}
// 导航选中背景色
.xuanzhong {
background: linear-gradient(180deg, #73551D 0%, #C09C43 100%);
font-weight: 700;
color: #FFFFFF !important;
}
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
}
/deep/.el-menu-item:hover {
@extend .xuanzhong;
}
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #F6F7F9;
color: #4A4A4A;
}
/deep/.el-submenu__title:hover {
@extend .xuanzhong;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
@extend .xuanzhong;
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
// background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
// box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: #0D1230;
background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%);
display: flex;
align-items: center;
padding-right: 20px;
padding: 0 20px;
justify-content: space-between;
margin-bottom: 10px;
.header-logo {
width: 300px;
}
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.breadcrumb-container {
float: left;
}
.right-menu {
float: right;
......@@ -166,11 +123,6 @@ export default {
display: flex;
align-items: center;
.function {
margin: 0 15px;
cursor: pointer;
}
.shutdown {
font-size: 20px;
margin-left: 15px;
......
......@@ -13,17 +13,8 @@ export default {
}
},
render (h, context) {
const { icon, title } = context.props
const { title } = context.props
const vnodes = []
if (icon) {
if (icon.includes('el-icon')) {
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
} else {
vnodes.push(<svg-icon icon-class={icon} />)
}
}
if (title) {
vnodes.push(<span slot='title'>{(title)}</span>)
}
......@@ -31,11 +22,3 @@ export default {
}
}
</script>
<style scoped>
.sub-el-icon {
color: currentColor;
width: 1em;
height: 1em;
}
</style>
......
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
<sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
</el-menu>
</template>
......@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes1 } from '@/router'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
......@@ -29,7 +30,7 @@ export default {
return variables
},
asyncRoutes () {
return asyncRoutes1.slice(0, 3)
return asyncRoutes.slice(0, 3)
}
}
}
......
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
<sidebar-item v-for="route in permission_routes.slice(5, 7)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
</el-menu>
</template>
......@@ -12,7 +13,7 @@ import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes1 } from '@/router'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
......@@ -29,7 +30,7 @@ export default {
return variables
},
asyncRoutes () {
return asyncRoutes1.slice(3, asyncRoutes1.length)
return asyncRoutes.slice(3, 6)
}
}
}
......
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as Sidebar } from './Sidebar/sidebarRight.vue'
export { default as TagsView } from './TagsView/index.vue'
......
<template>
<div class="app-wrapper">
<!-- <sidebar class="sidebar-container" />
<div class="main-container">
<navbar />
<app-main />
</div> -->
<navbar />
<div class="main-container">
<sidebar class="sidebar-container" />
<div class="appMain">
<app-main />
</div>
</div>
......@@ -42,7 +36,7 @@ export default {
position: relative;
height: 100%;
width: 100%;
background-color: $containerbg;
&.mobile.openSidebar {
position: fixed;
......@@ -50,23 +44,14 @@ export default {
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
width: 100%;
transition: width 0.28s;
}
.appMain {
height: calc(100vh - 65px);
background-color: $containerbg;
.el-dropdown-menu--small {
padding: 0;
width: 5px;
.app-main {
height: 100%;
padding: 10px;
box-sizing: border-box;
}
}
</style>
......
......@@ -16,14 +16,12 @@ export default {
}
</script>
<style lang="scss" scoped>
.hasTagsView {
.app-main {
overflow-x: auto;
padding: 5px;
.app-main {
height: calc(100vh - 84px);
overflow-x: hidden;
box-sizing: border-box;
background-color: #EDF1F7;
box-sizing: border-box;
}
flex: 1;
width: 100%;
margin-right: 15px;
}
</style>
\ No newline at end of file
......
<template>
<div class="navbar-con">
<div class="navbar">
<div class="sidebarLeft">
<sidebarLeft />
<div class="logo">
<img :src="require('@/image/logo.png')" alt="" />
</div>
<div class="backdrop">
<Breadcrumb />
</div>
<div class="sidebarRight d-center">
<sidebarRight />
<div class="right-menu">
<div class="dataView pointer" @click="handleDataView">大屏展示</div>
<div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
<div class="avatar-wrapper">
<span style="padding-right:10px">{{ name }}</span>
......@@ -21,17 +22,14 @@
</div>
</div>
</div>
</div>
</template>
<script>
import defaultSettings from '@/settings'
import sidebarLeft from './Sidebar/sidebarLeft'
import sidebarRight from './Sidebar/sidebarRight'
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import defaultSettings from '@/settings'
export default {
components: {
sidebarLeft,
sidebarRight
Breadcrumb
},
computed: {
...mapGetters(['sidebar', 'avatar', 'name'])
......@@ -51,70 +49,115 @@ export default {
},
handleCommand (command) {
if (command == 'a') {
} else {
}
}
}
}
</script>
<style lang="scss" scoped>
/deep/.el-menu--horizontal {
display: flex;
align-items: center;
}
.navbar-con {
position: relative;
.menubg {
line-height: 30px;
color: #FFFFFF;
margin-right: 5px;
background: linear-gradient(180deg, #0A2580 0%, #2542C9 100%);
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
}
}
/deep/.el-menu-item {
@extend .menubg;
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url('../../image/dp.png');
background-size: cover;
margin-right: 20px;
}
/deep/.el-submenu {
@extend .menubg;
.NoticeBar {
position: absolute;
bottom: 0;
}
/deep/.el-submenu__title {
line-height: 30px !important;
height: 42px !important;
}
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #EBEEF5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
/deep/.el-submenu__title span {
.el-dropdown-menu__item {
text-align: center;
margin-top: 0 !important;
font-size: 14px;
}
// 导航选中背景色
.xuanzhong {
background: linear-gradient(180deg, #73551D 0%, #C09C43 100%);
font-weight: 700;
color: #FFFFFF !important;
}
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
width: 140px;
height: 36px;
line-height: 36px;
}
/deep/.el-menu-item:hover {
@extend .xuanzhong;
}
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #EBEEF5;
}
/deep/.el-submenu__title:hover {
@extend .xuanzhong;
}
.popper__arrow {
top: -11px !important;
left: 110px !important;
transform: rotate(0deg) scale(2);
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
@extend .xuanzhong;
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #F6F7F9;
color: #4A4A4A;
}
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
background: linear-gradient(180deg, #0D3DC9 0%, #3476E1 100%);
// background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
// box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: #0D1230;
display: flex;
align-items: center;
padding: 0 20px;
padding-right: 20px;
justify-content: space-between;
margin-bottom: 10px;
.header-logo {
width: 300px;
}
.backdrop {
flex: 1;
width: 60%;
background-size: 100% 100%;
height: $headerHeight;
display: flex;
align-items: center;
}
.hamburger-container {
line-height: 43px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.breadcrumb-container {
float: left;
}
.right-menu {
float: right;
......@@ -123,6 +166,11 @@ export default {
display: flex;
align-items: center;
.function {
margin: 0 15px;
cursor: pointer;
}
.shutdown {
font-size: 20px;
margin-left: 15px;
......
......@@ -13,8 +13,17 @@ export default {
}
},
render (h, context) {
const { title } = context.props
const { icon, title } = context.props
const vnodes = []
if (icon) {
if (icon.includes('el-icon')) {
vnodes.push(<i class={[icon, 'sub-el-icon']} />)
} else {
vnodes.push(<svg-icon icon-class={icon} />)
}
}
if (title) {
vnodes.push(<span slot='title'>{(title)}</span>)
}
......@@ -22,3 +31,11 @@ export default {
}
}
</script>
<style scoped>
.sub-el-icon {
color: currentColor;
width: 1em;
height: 1em;
}
</style>
......
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/sidebarRight.vue'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'
......
<template>
<div class="app-wrapper">
<navbar />
<div class="appMain">
<div class="main-container">
<sidebar class="sidebar-container" />
<app-main />
</div>
</div>
......@@ -36,7 +37,7 @@ export default {
position: relative;
height: 100%;
width: 100%;
background-color: $containerbg;
&.mobile.openSidebar {
position: fixed;
......@@ -44,14 +45,23 @@ export default {
}
}
.appMain {
height: calc(100vh - 65px);
background-color: $containerbg;
.app-main {
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
padding: 10px;
box-sizing: border-box;
}
position: absolute;
z-index: 999;
}
.fixed-header {
width: 100%;
transition: width 0.28s;
}
.el-dropdown-menu--small {
padding: 0;
width: 5px;
}
</style>
......
......@@ -17,21 +17,19 @@ router.beforeEach(async (to, from, next) => {
}
if (hasAddRoute) {
next()
} else {
const { result: getMenuData } = await getMenuInfo()
const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
// 获取用户信息
await store.dispatch('user/getUserInfo')
router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
const routeTo = Cookies.get('routerTo')
if (routeTo && routeTo !== '/') {
next({ ...to, replace: true })
} else {
next('/jgHome')
}
}
// else {
// const { result: getMenuData } = await getMenuInfo()
// const accessRoutes = await store.dispatch('permission/generateRoutes', getMenuData)
// // 获取用户信息
// await store.dispatch('user/getUserInfo')
// router.addRoutes([...accessRoutes, { path: '*', redirect: '/404', hidden: true }])
// const routeTo = Cookies.get('routerTo')
// if (routeTo && routeTo !== '/') {
// next({ ...to, replace: true })
// } else {
// next('/home')
// }
// }
next()
NProgress.done()
})
router.afterEach(to => {
......
......@@ -3,8 +3,6 @@ import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
import Layout1 from '@/layout1'
/* Router Modules */
// import componentsRouter from './modules/components'
export const constantRoutes = [
......@@ -26,6 +24,21 @@ export const constantRoutes = [
path: '/dataView',
name: 'dataView',
component: () => import('@/views/dataView/index')
},
// 监管首页
{
path: '/',
component: Layout,
redirect: '/jgHome',
meta: { title: '首页' },
children: [
{
path: 'jgHome',
component: () => import('@/views/home/index'),
name: 'jgHome',
meta: { title: '首页', icon: 'workbench', affix: true }
}
]
}
]
/**
......@@ -33,17 +46,18 @@ export const constantRoutes = [
* the routes that need to be dynamically loaded based on user roles
*/
export const asyncRoutes = [
// 系统首页
// 监管首页
{
path: '/',
component: Layout,
redirect: '/home',
redirect: '/jgHome',
meta: { title: '首页' },
children: [
{
path: 'home',
path: 'jgHome',
component: () => import('@/views/home/index'),
name: 'home',
meta: { title: '工作台', icon: 'workbench', affix: true }
name: 'jgHome',
meta: { title: '首页', icon: 'workbench', affix: true }
}
]
},
......@@ -54,7 +68,7 @@ export const asyncRoutes = [
children: [
{
path: 'index',
component: () => import('@/views/jsbwcx/index'),
component: () => import('@/views/jsbwcx/index.vue'),
name: 'jsbwcx',
meta: { title: '接收报文查询', icon: 'zsgl' }
}
......@@ -296,96 +310,10 @@ export const asyncRoutes = [
}
]
export const asyncRoutes1 = [
// 监管首页
{
path: '/',
component: Layout1,
redirect: '/jgHome',
meta: { title: '首页' },
children: [
{
path: 'jgHome',
component: () => import('@/views/home/index'),
name: 'jgHome',
meta: { title: '首页', icon: 'workbench', affix: true }
}
]
},
// 接收报文查询
{
path: '/jsbwcx1',
component: Layout1,
children: [
{
path: 'index',
component: () => import('@/views/jsbwcx/index'),
name: 'jsbwcx',
meta: { title: '接收报文查询1', icon: 'zsgl' }
}
]
},
// 上报报文查询
{
path: '/sbbwcx1',
component: Layout1,
children: [
{
path: 'index',
component: () => import('@/views/sbbwcx/index'),
name: 'sbbwcx',
meta: { title: '上报报文查询', icon: 'zsgl' }
}
]
},
// 登簿日志
{
path: '/dbrzcx1',
component: Layout1,
children: [
{
path: 'index',
component: () => import('@/views/dbrzcx/index'),
name: 'dbrzcx',
meta: { title: '登簿日志查询', icon: 'zhcx' }
}
]
},
// 系统管理
{
path: '/system1',
component: Layout1,
meta: { title: '系统管理', icon: 'sqcx', breadcrumb: false },
redirect: '/system/dictionaries',
alwaysShow: true,
name: 'system',
children: [
{
path: 'dictionaries',
component: () => import('@/views/system/dictionaries/dictionaries.vue'),
name: 'dictionaries',
meta: { title: '字典管理' }
},
{
path: 'validationRule',
component: () => import('@/views/system/validationRule'),
name: 'validationRule',
meta: { title: '上报效验规则配置' }
},
{
path: 'timedTask',
component: () => import('@/views/system/timedTask'),
name: 'timedTask',
meta: { title: '定时任务' }
}
]
}
]
const createRouter = () =>
new Router({
scrollBehavior: () => ({ y: 0 }),
routes: [...constantRoutes, ...asyncRoutes, ...asyncRoutes1]
routes: [...constantRoutes, ...asyncRoutes]
})
const router = createRouter()
......
import { asyncRoutes, constantRoutes, resetRouter } from '@/router'
import { constantRoutes } from '@/router'
import asyncRouter from '@/utils/asyncRouter.js'
const state = {
routes: [],
......