Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
07624b2b by renchao@pashanhoo.com
Options

style:监管配置修改

1 parent 3754c5a5
Expand all
Inline Side-by-side
Showing 27 changed files with 10 additions and 2074 deletions
{
"TITLE": "汉中市监管系统",
"THEME": "jg",
"LOGIN": "jg",
"CODE": "BDCJGPT",
"AREARMAP": "610702",
"XZQ": "汉中市",
......
{
"TITLE": "汉中市数据上报系统",
"THEME": "sb",
"LOGIN": "sb",
"CODE": "BDCSBPT",
"AREARMAP": "610702",
"XZQ": "汉中市",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#4A4A4A",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management",
"IPCONFIG": "http://192.168.2.38:8027"
}
\ No newline at end of file
{
"TITLE": "玉树州监管系统",
"THEME": "jg",
"LOGIN": "jg",
"CODE": "BDCJGPT",
"AREARMAP": "632701",
"XZQ": "玉树州",
......
{
"TITLE": "玉树州数据上报系统",
"THEME": "sb",
"LOGIN": "sb",
"CODE": "BDCSBPT",
"AREARMAP": "632701",
"XZQ": "玉树州",
"SERVERAPI": "/bdcsjsb",
"calcHeight": 160,
"echartTextColor": "#4A4A4A",
"MANAGEMENTAPI": "http://192.168.2.38:8090/management",
"IPCONFIG": "http://192.168.2.38:8027"
}
\ No newline at end of file
{
"TITLE": "汉中市监管系统",
"THEME": "jg",
"LOGIN": "jg",
"CODE": "BDCJGPT",
"AREARMAP": "610702",
"XZQ": "汉中市",
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-28 10:12:27
-->
<template>
<transition name="fade-transform" mode="out-in">
<router-view />
</transition>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key () {
return this.$route.path
}
}
}
</script>
<!--面包屑 -->
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
<span class="no-redirect">当前位置></span>
<!-- <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" class="breadcrumbIcon" /> -->
<span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
item.meta.title
}}</span>
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
export default {
data () {
return {
levelList: null
}
},
watch: {
$route (route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
return
}
this.getBreadcrumb()
}
},
created () {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
// only show routes with meta.title
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = matched
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
isDashboard (route) {
const name = route && route.name
if (!name) {
return false
}
return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
},
pathCompile (path) {
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink (item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
}
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #ffffff;
cursor: text;
font-size: 16px;
}
.breadcrumbIcon {
color: #ffffff;
margin-right: 5px;
width: 16px;
height: 16px;
}
}
</style>
<template>
<div class="navbar-con">
<div class="navbar">
<div class="logo">
<img :src="require('@/image/bdclogo.png')" alt="" />
<h4>{{ BASE_API.TITLE }}</h4>
</div>
<div class="right-menu">
<div class="user">
{{ userName }}
<span @click="onCancel">
<i class="el-icon-switch-button"></i>
</span>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from './Breadcrumb'
import { logout } from "@/api/login.js";
export default {
components: {
Breadcrumb
},
computed: {
...mapGetters(["userInfo"]),
userName () {
return this.userInfo ? this.userInfo.name : ""
}
},
methods: {
handleDataView () {
const { href } = this.$router.resolve('/dataView');
window.open(href, '_blank');
},
themeChange (val) {
this.$store.dispatch('app/updateTheme', val)
},
onCancel () {
logout()
.then((res) => {
sessionStorage.removeItem("token");
this.$store.dispatch("user/resetState");
this.$store.dispatch("permission/resetRoutes");
this.$router.replace({
path: "/sb"
})
})
.catch((error) => {
// console.dir(error);
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/_handle.scss";
.navbar-con {
position: relative;
.logo {
color: #fff;
font-size: 26px;
font-weight: 700;
display: flex;
margin-left: 15px;
img {
width: 47px;
height: 47px;
}
h4 {
margin-left: 20px;
height: 50px;
line-height: 50px;
}
}
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
@include background("navbg");
display: flex;
align-items: center;
padding-right: 20px;
justify-content: space-between;
.header-logo {
width: 300px;
}
.right-menu-item {
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
}
}
}
</style>
export default {
computed: {
device() {
return this.$store.state.app.device
}
},
mounted() {
// In order to fix the click on menu on the ios device will trigger the mouseleave bug
// https://github.com/PanJiaChen/vue-element-admin/issues/1135
this.fixBugIniOS()
},
methods: {
fixBugIniOS() {
const $subMenu = this.$refs.subMenu
if ($subMenu) {
const handleMouseleave = $subMenu.handleMouseleave
$subMenu.handleMouseleave = (e) => {
if (this.device === 'mobile') {
return
}
handleMouseleave(e)
}
}
}
}
}
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-22 11:19:04
-->
<script>
export default {
name: 'MenuItem',
functional: true,
props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
},
render (h, context) {
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>)
}
return vnodes
}
}
</script>
<template>
<component :is="type" v-bind="linkProps(to)">
<slot />
</component>
</template>
<script>
import { isExternal } from '@/utils/validate'
export default {
props: {
to: {
type: String,
required: true
}
},
computed: {
isExternal() {
return isExternal(this.to)
},
type() {
if (this.isExternal) {
return 'a'
}
return 'router-link'
}
},
methods: {
linkProps(to) {
if (this.isExternal) {
return {
href: to,
target: '_blank',
rel: 'noopener'
}
}
return {
to: to
}
}
}
}
</script>
<template>
<div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo">
<h1 v-else class="sidebar-title">
{{ title }}
</h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<h1 class="sidebar-title">
{{ title }}
</h1>
</router-link>
</transition>
</div>
</template>
<script>
import defaultSettings from '@/settings'
const { title } = defaultSettings
export default {
name: 'SidebarLogo',
props: {
collapse: {
type: Boolean,
required: true
}
},
data () {
return {
title: title,
}
}
}
</script>
<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
opacity: 0;
}
.sidebar-logo-container {
position: relative;
width: 100%;
text-align: center;
overflow: hidden;
height: 100px;
& .sidebar-logo-link {
height: 100%;
width: 100%;
& .sidebar-logo {
width: 41px;
height: 39px;
vertical-align: middle;
// margin-left: 47px;
// margin-right: 48px;
margin-top: 22px;
}
& .sidebar-title {
margin: 0;
margin-top: 10px;
margin-bottom: 20px;
color: #fff;
font-weight: 600;
line-height: 25px;
font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0px;
width: 32.8px;
height: 31.2px;
}
}
}
</style>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-30 10:39:40
-->
<template>
<div v-if="!item.hidden">
<template
v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
<item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title"
class="menu-icon" />
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
:base-path="resolvePath(child.path)" class="nest-menu" />
</el-submenu>
</div>
</template>
<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'
export default {
name: 'SidebarItem',
components: { Item, AppLink },
mixins: [FixiOSBug],
props: {
// route object
item: {
type: Object,
required: true
},
isNest: {
type: Boolean,
default: false
},
basePath: {
type: String,
default: ''
}
},
data () {
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this.onlyOneChild = null
return {}
},
methods: {
hasOneShowingChild (children = [], parent) {
const showingChildren = children.filter(item => {
if (item.hidden) {
return false
} else {
// Temp set(will be used if only has one showing child)
this.onlyOneChild = item
return true
}
})
// When there is only one child router, the child router is displayed by default
if (showingChildren.length >= 1 && (showingChildren[0].path == 'ywjr' || showingChildren[0].path == "sbbwcx" || showingChildren[0].path == "dbrzcx")) {
return true
}
// Show parent if there are no child router to display
if (showingChildren.length === 0) {
this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
return true
}
return false
},
resolvePath (routePath) {
if (isExternal(routePath)) {
return routePath
}
if (isExternal(this.basePath)) {
return this.basePath
}
return path.resolve(this.basePath, routePath)
}
}
}
</script>
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-27 14:09:57
-->
<template>
<div>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(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" /> -->
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import defaultSettings from '@/settings'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
data () {
return {
title: defaultSettings.title
}
},
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes
}
}
}
</script>
<template>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script>
const tagAndTagSpacing = 4 // tagAndTagSpacing
export default {
name: 'ScrollPane',
data () {
return {
left: 0
}
},
computed: {
scrollWrapper () {
return this.$refs.scrollContainer.$refs.wrap
}
},
mounted () {
this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
},
beforeDestroy () {
this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
},
methods: {
handleScroll (e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = this.scrollWrapper
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
},
emitScroll () {
this.$emit('scroll')
},
moveToTarget (currentTag) {
const $container = this.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = this.scrollWrapper
const tagList = this.$parent.$refs.tag
let firstTag = null
let lastTag = null
// find first tag and last tag
if (tagList.length > 0) {
firstTag = tagList[0]
lastTag = tagList[tagList.length - 1]
}
if (firstTag === currentTag) {
$scrollWrapper.scrollLeft = 0
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
// find preTag and nextTag
const currentIndex = tagList.findIndex(item => item === currentTag)
const prevTag = tagList[currentIndex - 1]
const nextTag = tagList[currentIndex + 1]
// the tag's offsetLeft after of nextTag
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
// the tag's offsetLeft before of prevTag
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
}
}
}
}
}
</script>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/deep/ .el-scrollbar__view {
display: inline-block !important;
}
/deep/ .el-scrollbar__wrap {
overflow-x: hidden !important;
}
</style>
<template>
<div id="tags-view-container" class="tags-view-container">
<scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
<router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
@click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
@contextmenu.prevent.native="openMenu(tag, $event)">
{{ tag.title }}
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
</router-link>
</scroll-pane>
<ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭全部</li>
</ul>
</div>
</template>
<script>
import ScrollPane from './ScrollPane'
import path from 'path'
export default {
components: { ScrollPane },
data () {
return {
visible: false,
top: 0,
left: 0,
selectedTag: {},
affixTags: []
}
},
computed: {
visitedViews () {
return this.$store.state.tagsView.visitedViews.slice(1)
},
routes () {
return this.$store.state.permission.routes
}
},
watch: {
$route () {
this.addTags()
this.moveToCurrentTag()
},
visible (value) {
if (value) {
document.body.addEventListener('click', this.closeMenu)
} else {
document.body.removeEventListener('click', this.closeMenu)
}
}
},
mounted () {
this.initTags()
this.addTags()
},
methods: {
isActive (route) {
return route.path === this.$route.path
},
isAffix (tag) {
return tag.meta && tag.meta.affix
},
filterAffixTags (routes, basePath = '/') {
let tags = []
routes.forEach(route => {
if (route.meta && route.meta.affix) {
const tagPath = path.resolve(basePath, route.path)
tags.push({
fullPath: tagPath,
path: tagPath,
name: route.name,
meta: { ...route.meta }
})
}
if (route.children) {
const tempTags = this.filterAffixTags(route.children, route.path)
if (tempTags.length >= 1) {
tags = [...tags, ...tempTags]
}
}
})
return tags
},
initTags () {
const affixTags = this.affixTags = this.filterAffixTags(this.routes)
for (const tag of affixTags) {
// Must have tag name
if (tag.name) {
this.$store.dispatch('tagsView/addVisitedView', tag)
}
}
},
addTags () {
const { name } = this.$route
if (name) {
this.$store.dispatch('tagsView/addView', this.$route)
}
return false
},
moveToCurrentTag () {
const tags = this.$refs.tag
this.$nextTick(() => {
for (const tag of tags) {
if (tag.to.path === this.$route.path) {
this.$refs.scrollPane.moveToTarget(tag)
// when query is different then update
if (tag.to.fullPath !== this.$route.fullPath) {
this.$store.dispatch('tagsView/updateVisitedView', this.$route)
}
break
}
}
})
},
refreshSelectedTag (view) {
this.$store.dispatch('tagsView/delCachedView', view).then(() => {
const { fullPath } = view
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
})
},
closeSelectedTag (view) {
this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
if (this.isActive(view)) {
this.toLastView(visitedViews, view)
}
})
},
closeOthersTags () {
this.$router.push(this.selectedTag)
this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
this.moveToCurrentTag()
})
},
closeAllTags (view) {
this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
if (this.affixTags.some(tag => tag.path === view.path)) {
return
}
this.toLastView(visitedViews, view)
})
},
toLastView (visitedViews, view) {
const latestView = visitedViews.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.fullPath)
} else {
// now the default is to redirect to the home page if there is no tags-view,
// you can adjust it according to your needs.
if (view.name === 'Dashboard') {
// to reload home page
this.$router.replace({ path: '/redirect' + view.fullPath })
} else {
this.$router.push('/')
}
}
},
openMenu (tag, e) {
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left - 210 // container margin left
const offsetWidth = this.$el.offsetWidth // container width
const maxLeft = offsetWidth - menuMinWidth // left boundary
const left = e.clientX - offsetLeft + 15 // 15: margin right
if (left > maxLeft) {
this.left = maxLeft
} else {
this.left = left
}
this.top = e.clientY
this.visible = true
this.selectedTag = tag
},
closeMenu () {
this.visible = false
},
handleScroll () {
this.closeMenu()
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/_handle.scss";
.tags-view-container {
height: 50px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 7px;
margin-bottom: 10px;
border-radius: 4px;
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
line-height: 26px;
color: #4A4A4A;
@include font_color("tagsText");
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
border-radius: 4px;
@include borderColor("tagsBorderColor");
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
@include background("tagsBg");
@include borderColor("tagsActiveText");
@include font_color("tagsActiveText");
&::before {
content: '';
@include background("tagsActiveText");
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
position: relative;
margin-right: 2px;
}
}
}
}
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: absolute;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 12px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
li {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
}
}
}
</style>
<style lang="scss">
//reset element css of el-icon-close
.tags-view-wrapper {
.tags-view-item {
.el-icon-close {
width: 16px;
height: 16px;
vertical-align: 2px;
border-radius: 50%;
text-align: center;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
transform-origin: 100% 50%;
&:before {
transform: scale(.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;
}
}
}
}
</style>
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-04-03 10:12:39
-->
<template>
<div class="app-wrapper">
<navbar />
<div class="main-container">
<sidebar class="sidebar-container" />
<div class="app-content">
<tags-view v-if="needTagsView" />
<app-main />
</div>
</div>
</div>
</template>
<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
created () {
this.$store.dispatch("products/setData", "BDCSBPT");
},
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
}
}
</script>
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/sbSidebar.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
// background-color: $containerbg;
padding: 0;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.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;
}
.app-content {
overflow: hidden;
box-sizing: border-box;
flex: 1;
width: 100%;
background: #EAEBF0;
padding: 10px;
}
</style>
import store from '@/store'
const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design
export default {
watch: {
$route(route) {
if (this.device === 'mobile' && this.sidebar.opened) {
store.dispatch('app/closeSideBar', { withoutAnimation: false })
}
}
},
beforeMount() {
window.addEventListener('resize', this.$_resizeHandler)
},
beforeDestroy() {
window.removeEventListener('resize', this.$_resizeHandler)
},
mounted() {
const isMobile = this.$_isMobile()
if (isMobile) {
store.dispatch('app/toggleDevice', 'mobile')
store.dispatch('app/closeSideBar', { withoutAnimation: true })
}
},
methods: {
// use $_ for mixins properties
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
$_isMobile() {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
},
$_resizeHandler() {
if (!document.hidden) {
const isMobile = this.$_isMobile()
store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
if (isMobile) {
store.dispatch('app/closeSideBar', { withoutAnimation: true })
}
}
}
}
}
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-04-12 11:15:57
* @LastEditTime: 2023-05-11 17:18:37
*/
import Vue from 'vue'
import router from "./router";
......@@ -20,7 +20,7 @@ router.beforeEach(async (to, from, next) => {
let hasAddDict = store.state.dict.addDict;
let hasUser = store.state.user.hasUser;
let hasAddRoute = store.state.permission.addRoutes;
if (to.path == "/sb" || to.path == "/jg" || to.path == "/sb1") {
if (to.path == "/jg") {
localStorage.removeItem("token");
next();
} else {
......@@ -49,7 +49,7 @@ router.beforeEach(async (to, from, next) => {
{ path: "*", redirect: "/404", hidden: true },
]);
const routeTo = Cookies.get("routerTo");
if (routeTo && routeTo !== "/" && routeTo !== "/sb" && routeTo !== "/jg") {
if (routeTo && routeTo !== "/" && routeTo !== "/jg") {
next({ ...to, replace: true });
} else {
next();
......@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => {
}
} else {
next(`/${Vue.prototype.BASE_API.LOGIN}`);
next('/jg');
}
}
NProgress.done();
......@@ -66,4 +66,4 @@ router.afterEach((to) => {
// 解决刷新页面报404问题
Cookies.set("routerTo", to.fullPath);
NProgress.done();
});
})
......
......@@ -25,14 +25,9 @@ export const constantRoutes = [
component: () => import("@/views/loginjg/index.vue"),
},
{
path: "/sb",
name: "loginsb",
component: () => import("@/views/loginsb/index.vue"),
},
{
path: '/',
redirect: to => {
return { path: `/${Vue.prototype.BASE_API.LOGIN}` }
return { path: '/jg' }
},
},
// 监管首页
......
......@@ -26,12 +26,7 @@ const mutations = {
const actions = {
// 添加全部菜单
generateRoutes ({ commit }, getMenuInfo) {
let Layout;
if (Vue.prototype.BASE_API.THEME == 'sb') {
Layout = r => require.ensure([], () => r(require(`@/layout1`)))
} else {
Layout = r => require.ensure([], () => r(require(`@/layout`)))
}
let Layout = r => require.ensure([], () => r(require(`@/layout`)))
function asyncRouter (routers) {
routers.forEach(item => {
if (!item.children) {
......
@import "~@/styles/_handle.scss";
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
color: #686666;
}
.el-table .cell {
line-height: 16px;
}
//input
.el-input__inner {
color: #FFFFFF !important;
padding: 0 7px !important;
}
// input 样式
// 全局css 加上以下代码，可以隐藏上下箭头
// 取消input的上下箭头
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
input[type="number"] {
-moz-appearance: textfield;
}
.el-upload {
input[type="file"] {
display: none !important;
}
}
.el-upload__input {
display: none;
}
.cell {
.el-tag {
margin-right: 0px;
}
}
.small-padding {
.cell {
padding-left: 5px;
padding-right: 5px;
}
}
.fixed-width {
.el-button--mini {
padding: 7px 10px;
min-width: 60px;
}
}
.status-col {
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
}
}
.el-icon-date,
.el-icon-time {
display: none;
}
// to fixed https://github.com/ElemeFE/element/issues/2461
// refine element ui upload
.el-input.is-disabled .el-input__inner {
background-color: transparent !important;
}
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
// dropdown
.el-dropdown-menu {
a {
display: block
}
}
// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
display: inline-flex !important;
}
// to fix el-date-picker css style
.el-range-separator {
box-sizing: content-box;
}
.el-submenu__icon-arrow {
margin-top: -5px;
}
// element 样式补丁
.el-menu--horizontal {
border-bottom: none !important;
}
.el-radio-group {
.el-radio-button__inner {
height: 36px;
line-height: 36px;
padding: 0 20px;
font-size: 14px;
}
.el-radio-button:first-child {
border-radius: 4px 0 0 4px;
}
.el-radio-button:last-child {
border-radius: 0 4px 4px 0;
}
}
.el-tabs__item:focus.is-active.is-focus:not(:active) {
box-shadow: none !important;
}
// Divider 分割线 样式的修改
.el-divider--horizontal {
margin: 10px 0 !important;
}
.el-row {
margin-bottom: 0 !important;
}
// form
.el-form-item__content {
margin-left: 0 !important;
}
.el-icon-full-screen,
.el-icon-rank {
cursor: pointer;
}
// 表格样式
.el-table th {
height: 48px !important;
font-size: 14px;
color: #4A4A4A;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
@include borderColor("pagBorderColor");
background-color: #FFFFFF;
@include font_color("pagText");
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
@include background("pagBg");
border-radius: 4px;
@include font_color("pagActiveText");
@include borderColor("pagActiveText");
}
.el-table__header th {
background-color: #F1F3F7 !important;
}
.el-table tr td {
font-size: 14px;
color: #7A7A7A;
}
.lb-table .el-table {
border-bottom: none;
border-radius: 4px 4px 0 0;
}
.el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
display: none !important
}
.el-message-box__btns {
display: flex;
flex-direction: row-reverse;
}
.el-message-box__btns .el-button--primary {
margin-right: 10px;
}
.el-form-item__content {
flex: 1;
}
\ No newline at end of file
@import "~@/styles/_handle.scss";
.main-container {
width: 100%;
height: calc(100% - 74px);
transition: margin-left 0.28s;
display: flex;
}
.el-form-item__content {
margin-left: 0 !important;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
font-size: 0px;
@include background_color("menuBg");
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.el-scrollbar {
height: 100%;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
margin-right: 0 !important;
&::-webkit-scrollbar {
display: none;
}
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 5px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
.el-menu {
background-color: transparent !important;
border: none;
@include font_color("menuText");
height: 100%;
width: 100% !important;
}
// menu hover
.el-menu--collapse .el-submenu__title,
.el-menu--collapse .submenu-title-noDropdown {
margin-left: 0px !important;
}
// 有子级
.el-submenu__title {
@include font_color("menuText");
background-color: transparent !important;
&:hover {
color: $subMenuActiveText !important;
@include font_color("submenuColor");
border-right: 5px solid #36CEB6;
@include background_color("submenuBg");
box-sizing: border-box;
.svg-icon,
i,
span {
@include font_color("submenuColor");
}
}
}
// 没有子级
.submenu-title-noDropdown {
@include font_color("menuText");
padding-left: 20px;
height: 56px;
background-color: transparent !important;
&:hover {
@include font_color("submenuColor");
@include background_color("submenuBg");
border-right: 5px solid #36CEB6;
box-sizing: border-box;
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
}
.submenu-title-noDropdown.is-active,
.el-submenu__title.is-active {
@include background_color("submenuBg");
@include font_color("submenuColor");
border-right: 5px solid #36CEB6;
box-sizing: border-box;
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
.submenu-title-noDropdown,
.el-submenu__title {
font-weight: 600;
font-size: $sideBarFontSize;
>i {
color: $subMenuActiveText !important;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-right: 10px;
}
.svg-icon {
font-size: 18px;
color: #6D7278 !important;
}
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
transform: rotateZ(0deg) !important;
-webkit-transform: rotateZ(0deg) !important;
-moz-transform: rotateZ(0deg) !important;
-ms-transform: rotateZ(0deg) !important;
-o-transform: rotateZ(0deg) !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
&.is-active {
@include background_color("menuActive");
@include font_color("menuActiveText");
}
&:hover {
@include background_color("menuActive");
@include font_color("menuActiveText");
color: $menuActiveText !important;
}
min-width: 130px !important;
background-color: transparent !important;
font-weight: 600;
@include font_color("menuText");
font-size: $sideBarFontSize;
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 16px;
}
.sub-el-icon {
margin-left: 19px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 16px;
}
.sub-el-icon {
margin-left: 19px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
width: calc(100% - 12px);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
font-weight: 600 !important;
font-size: 15px !important;
@include background("menuActive");
@include font_color("menuText");
&:hover {
@include background("menuActive");
opacity: .9;
.svg-icon,
i,
span {
color: $menuText;
}
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
background-color: #32ACFE !important;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
min-width: 140px;
padding: 12px 0;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
.el-submenu.is-active .el-submenu__title {
@include background_color("submenuBg");
@include font_color("submenuColor");
border-right: 5px solid #36CEB6;
}
.el-submenu.is-active .el-submenu__title:hover {
@include font_color("submenuColor");
}
.el-submenu.is-active .el-submenu__title .svg-icon {
@include font_color("submenuColor");
}
.el-submenu__title {
display: flex;
align-items: center;
}
.sidebar-container .submenu-title-noDropdown>i,
.sidebar-container .el-submenu__title>i {
color: #6D7278 !important;
}
.el-submenu.is-active .el-submenu__title>i {
color: #FFFFFF !important;
}
.el-submenu__title span {
white-space: normal;
word-break: break-all;
line-height: 20px;
flex: 1;
padding-right: 20px;
}
.el-menu-item {
height: 42px;
display: flex;
align-items: center;
padding-right: 20px !important;
}
.el-menu-item span {
// white-space: nowrap !important;
word-break: break-all;
line-height: 20px;
flex: 1;
}
\ No newline at end of file
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-24 16:44:54
* @LastEditTime: 2023-05-11 17:23:08
*/
import Vue from 'vue'
export default function getTheme (theme = Vue.prototype.BASE_API.THEME) {
const resultMap = {
'jg': function () {
return import("@/styles/jgPublic.scss");
},
'sb': function () {
return import("@/styles/sbPublic.scss");
},
'default': function () {
throw new Error(`Unsupported theme: ${theme}`);
},
};
const result = resultMap[theme]();
if (result instanceof Promise) {
return result;
} else {
return resultMap.default();
}
export default function getTheme () {
import("@/styles/jgPublic.scss")
}
\ No newline at end of file
......
<template>
<div class="bg">
<div class="title">
<img src="../../image/bdclogo.png" alt="">
<h2>{{ BASE_API.TITLE }}</h2>
</div>
<div class="login-inner-bg login">
<div class="user_style">
<h3>用户登录</h3>
<el-form :model="user" :rules="rules" ref="user" id="loginform" class="demo-ruleForm">
<el-form-item prop="account">
<el-input class="username" v-model="user.account" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" class="password" @keyup.enter.native="login('user')" v-model="user.password"
placeholder="请输入密码" show-password></el-input>
</el-form-item>
<!-- <el-form-item prop="yz">
<div class="flex-container">
<div class="flex-input">
<el-input class="yz" @keyup.native="login('user')" v-model="user.yz" placeholder="请输入验证码"></el-input>
</div>
<div class="flex-line"></div>
<div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
<div class="flex-renovate">
<font id="renovate" @click="verification">换一批</font>
</div>
</div>
</el-form-item> -->
<el-form-item class="login-btn">
<el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import { getMenuInfo } from "@/api/user";
import { loginIn } from "@/api/login.js";
export default {
name: "sbLogin",
data () {
return {
user: {
account: "",
password: "",
yz: "",
checkStatus: false,
},
productName: "",
rules: {
account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
password: [{ required: true, message: "请填写密码", trigger: "blur" }],
},
};
},
methods: {
verification () {
let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0;
for (; i++ < 4;) code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
setTimeout(() => {
let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d");
canvas.width = 80;
canvas.height = 28;
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 80, 28);
for (i = 0; i < code.length; i++) { this.drawText(ctx, code[i], i); }
}, 0);
},
drawText (ctx, txt, i) {
ctx.fillStyle = this.randomColor(50, 160);
ctx.font = "18px SimHei";
let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum(18, 28 - 5);
ctx.translate(x, y);
ctx.fillText(txt, 0, 0);
ctx.rotate((-0 * Math.PI) / 180);
ctx.translate(-x, -y);
},
randomColor (min, max) {
let r = this.randomNum(min, max);
let g = this.randomNum(min, max);
let b = this.randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
},
randomNum (min, max) {
return Math.floor(Math.random() * (max - min) + min);
},
//记住用户名
checkUserName: function (flag) {
this.user.checkStatus = flag;
if (this.user.checkStatus) {
localStorage.setItem("accountId", this.user.account);
let name = localStorage.getItem("accountId");
if (name === "") {
return;
} else {
this.user.account = name;
}
} else {
this.user.account = localStorage.getItem("accountId");
}
},
login (user) {
var self = this
this.$refs[user].validate(async (valid) => {
if (valid) {
let res = await loginIn(self.user.account, self.user.password)
if (res.status == 1) {
let code = this.BASE_API.CODE;
localStorage.setItem("token", `Bearer ${res.content}`);
const { result: getMenuData } = (await getMenuInfo(code)) || [];
let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path
//登录成功后需判断有无重定向，没有重定向则跳转首页
const accessRoutes = await this.$store.dispatch(
"permission/generateRoutes",
getMenuData
);
this.$router.addRoutes([
...accessRoutes,
{ path: "*", redirect: "/404", hidden: true },
]);
this.$router.replace(this.$route.query.redirect || path1);
} else {
this.$message.error(res.message);
}
}
})
}
}
}
</script>
<style scoped lang="scss">
.username,
.password,
.yz {
position: relative;
&:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
left: 10px;
top: 7px;
background-size: 100% 100%;
}
/deep/ .el-input__inner {
color: #000 !important;
text-indent: 24px;
}
}
.flex-container {
position: relative;
display: -webkit-flex;
display: flex;
}
.flex-input {
width: 100%;
}
.flex-line {
position: absolute;
width: 1px;
height: 64%;
margin: 5px;
right: 36%;
background-color: #CCCCCC;
}
.flex-img {
position: absolute;
margin: 2px;
right: 16%;
}
.flex-renovate {
position: absolute;
margin: 1px;
right: 3%;
}
#renovate {
color: #3F8FEA;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.username::before {
background-image: url(../../image/userlogo.png);
}
.password::before {
background-image: url(../../image/passlogo.png);
}
.yz::before {
background-image: url(../../image/yzlogo.png);
}
.bg {
width: 100%;
height: 100%;
min-width: 1440px;
min-height: 560px;
background: url(../../image/loginBoxsb.png) no-repeat;
background-size: 100% 100%;
overflow: hidden;
position: relative;
}
.title {
width: 24%;
height: 6%;
top: 20%;
right: 38%;
position: absolute;
img {
width: 60px;
height: 60px;
top: 0%;
left: 2%;
position: absolute;
}
h2 {
top: 25%;
left: 22%;
position: absolute;
width: 383px;
height: 42px;
font-size: 28px;
font-weight: 600;
color: #ffffff;
text-shadow: 0px 4px 4px #002c95;
}
}
.login-inner-bg {
background: white;
width: 24.6%;
min-width: 360px;
top: 30%;
right: 38%;
position: absolute;
background-size: 100% 100%;
box-sizing: border-box;
padding: 56px;
}
.login {
.user_style {
h3 {
font-weight: normal;
text-align: center;
margin: -10px auto 28px;
font-weight: 400;
width: 125px;
height: 29px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
}
.btn {
width: 100%;
height: 6vh;
background-color: #00c2de;
border-radius: 5px;
font-size: 1.4vw;
color: #000;
}
.btn:hover {
cursor: pointer;
background-color: #2d8cf0;
}
}
.login #loginform {
.el-form-item {
margin-bottom: 24px !important;
}
.login-btn {
margin-top: 30px !important;
}
.el-button {
font-size: 18px;
border-radius: 0;
background: #4162d8 !important;
color: #ffffff !important;
cursor: pointer !important;
}
.el-input__inner {
width: 100% !important;
}
.el-checkbox__label {
color: #fff;
}
}
.inputUser .ivu-input {
padding: 6px 24px !important;
border: 1px solid #9f9f9f !important;
}
</style>