Skip to content

bdc / bdcsjsb-web

Go to a project
Toggle navigation
Toggle navigation pinning
8a640b55 by renchao@pashanhoo.com
Options

style:上报配置修改

1 parent 6ca0b7a5
Expand all
Inline Side-by-side
Showing 23 changed files with 6 additions and 2093 deletions
{
"TITLE": "汉中市数据上报系统",
"THEME": "sb",
"LOGIN": "sb",
"CODE": "BDCSBPT",
"AREARMAP": "610702",
"XZQ": "汉中市",
......
{
"TITLE": "玉树州数据上报系统",
"THEME": "sb",
"LOGIN": "sb",
"CODE": "BDCSBPT",
"AREARMAP": "632701",
"XZQ": "玉树州",
......
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view />
</transition>
</section>
</template>
<script>
export default {
name: 'AppMain',
computed: {
key () {
return this.$route.path
}
}
}
</script>
\ No newline at end of file
<template>
<div class="navbar-con">
<div class="navbar">
<div class="title">
{{ BASE_API.TITLE }}
</div>
<div class="user">
欢迎进入系统 {{ userName }}
<span @click="onCancel">
<svg-icon icon-class="close" class="closeStyle" />退出系统</span>
</div>
<div class="sidebarLeft">
<sidebarLeft />
</div>
<div class="sidebarRight d-center">
<sidebarRight />
</div>
</div>
</div>
</template>
<script>
import sidebarLeft from "./Sidebar/sidebarLeft";
import sidebarRight from "./Sidebar/sidebarRight";
import { logout } from "@/api/login.js";
import { mapGetters } from "vuex";
export default {
components: {
sidebarLeft,
sidebarRight,
},
computed: {
...mapGetters(["userInfo"]),
userName () {
return this.userInfo ? this.userInfo.name : ""
}
},
methods: {
onCancel () {
logout()
.then((res) => {
sessionStorage.removeItem("token");
this.$store.dispatch("user/resetState");
this.$store.dispatch("permission/resetRoutes");
this.$router.replace({
path: "/jg"
})
})
.catch((error) => {
})
}
}
}
</script>
<style lang="scss" scoped>
.menubg {
height: 34px;
width: 130px !important;
text-align: center;
color: #ffffff;
background: url("~@/image/navbar.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-menu-item {
@extend .menubg;
}
/deep/.el-submenu {
@extend .menubg;
}
/deep/.el-submenu__title {
height: 34px;
color: #ffffff;
}
/deep/.el-submenu__title span {
font-size: 14px;
}
.sidebarLeft {
position: relative;
top: 13px;
width: 30%;
}
/deep/.el-menu {
display: flex;
justify-content: space-between;
width: 100%;
background: transparent !important;
}
/deep/.el-menu-item {
flex: 1;
width: 100%;
}
.sidebarRight {
position: relative;
top: 13px;
width: 30%;
}
// 导航选中背景色
.xuanzhong {
background: url("~@/image/selNavbar.png") no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
font-weight: 700;
}
/deep/.el-menu-item:hover {
@extend .xuanzhong;
}
/deep/.el-submenu__title:hover {
@extend .xuanzhong;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
@extend .xuanzhong;
}
/deep/.is-active {
@extend .xuanzhong;
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
background: url("~@/image/header.png") no-repeat;
background-size: 100% 100%;
.user {
font-size: 12px;
color: #ffffff;
position: absolute;
right: 20px;
top: 0;
cursor: pointer;
.closeStyle {
margin-right: 5px;
}
}
.title {
position: absolute;
left: 0;
top: 10px;
bottom: 0;
right: 0;
margin: 0 auto;
font-size: 32px;
color: #ffffff;
font-weight: 700;
text-align: center;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
align-items: center;
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
}
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
}
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
cursor: pointer;
position: relative;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
}
}
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
}
}
}
}
</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)
}
}
}
}
}
<script>
export default {
name: 'MenuItem',
functional: true,
props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default: ''
}
},
render (h, context) {
const { title } = context.props
const vnodes = []
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>
<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) {
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>
\ No newline at end of file
<!--
* @Description: log
* @Autor: renchao
* @LastEditTime: 2023-03-23 16:29:12
-->
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(4, 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" /> -->
</el-menu>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
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.slice(0, 3)
}
}
}
</script>
\ No newline at end of file
<!--
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-01-10 09:03:06
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-03-23 16:29:24
* @FilePath: \监管系统\js-web-jianguan\src\layout\components\Sidebar\sidebarRight.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(7, 10)" :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>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
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.slice(3, 6)
}
}
}
</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 @click="refreshSelectedTag(selectedTag)">Refresh</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags(selectedTag)">Close All</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
},
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 // 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>
.tags-view-container {
height: 40px;
width: 100%;
background: #fff;
border-bottom: 1px solid #d8dce5;
box-sizing: border-box;
padding-top: 3px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
.tags-view-wrapper {
.tags-view-item {
display: inline-block;
position: relative;
cursor: pointer;
height: 26px;
line-height: 26px;
border: 1px solid #d8dce5;
color: #495060;
background: #fff;
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #0794FF;
color: #fff;
border-color: #0794FF;
&::before {
content: '';
background: #fff;
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/sidebarRight.vue'
export { default as TagsView } from './TagsView/index.vue'
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 15:17:24
-->
<template>
<div class="app-wrapper jgWrapper">
<navbar />
<div class="appMain">
<app-main />
</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
},
created () {
this.$store.dispatch("products/setData", "BDCJGPT");
},
mixins: [ResizeMixin],
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
}
}
</script>
<style lang="scss">
@import "~@/styles/jgSidebar.scss";
</style>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
min-width: 1280px;
background: url("~@/image/bg.png") no-repeat;
background-size: 100% 100%;
padding: 12px;
box-sizing: border-box;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
.appMain {
// min-width: 1280px;
height: calc(100vh - 101px) !important;
box-sizing: border-box;
.app-main {
height: 100%;
}
}
</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 })
}
}
}
}
}
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Layout from '@/layout'
import Layout from '@/layout1'
export const constantRoutes = [
{
......
......@@ -2,7 +2,7 @@
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-09 15:24:53
* @LastEditors: Please set LastEditors
* @LastEditTime: 2023-03-23 10:19:35
* @LastEditTime: 2023-05-11 16:30:18
* @FilePath: \上报\bdcjg-web\src\store\modules\permission.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -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(`@/layout1`)))
function asyncRouter (routers) {
routers.forEach(item => {
if (!item.children) {
......
// 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 样式
// 全局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 {
color: #FFFFFF !important;
background-color: transparent !important;
border: 1px solid #224C7C !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;
}
/* --------------进度条美化---------------- */
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-corner {
display: none;
}
::-webkit-scrollbar-track {
width: 7px;
background-color: rgba(0, 0, 0, 0);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: rgba(69, 138, 207, .6);
background-clip: padding-box;
min-height: 28px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(69, 138, 207, .6);
}
// 滚动条位置
// 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;
}
// element table 样式修改
//去掉表格内的线
table th {
border-bottom: none !important;
}
// .el-table__body {
// -webkit-border-vertical-spacing: 6px !important; // 垂直间距
// }
table td {
box-sizing: border-box;
border-bottom: 1px solid #458ACF !important;
}
//去掉最下面的那一条线
.el-table::before {
height: 0;
}
.el-table__body tr {
box-sizing: content-box !important;
cursor: pointer;
}
.el-table__body-wrapper .el-table__body tr:hover {
background: #063160 !important;
box-shadow: inset 0px 0px 20px 0px #03DBFF !important;
}
.el-table__body tr:hover>td,
.el-table__body tr.hover-row>td.el-table__cell {
background: none !important;
}
// table 固定列样式
.el-table__fixed-right-patch {
background-color: #073781;
border-bottom: none;
}
.el-table__fixed-right {
background-color: #073781
}
.el-table__fixed::before,
.el-table__fixed-right::before {
display: none;
}
// 表格样式
.el-table th {
height: 48px !important;
font-size: 14px;
color: #4A4A4A;
}
.twoLineCls {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.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;
}
.el-submenu__title {
.svg-icon {
position: relative;
top: 2px;
}
}
// element 下拉框样式
.el-menu--popup,
.el-select-dropdown {
background: url("~@/image/slbg.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
border: none;
}
.el-popper[x-placement^="bottom"] .popper__arrow::after {
display: none;
}
.el-popper[x-placement^="bottom"] .popper__arrow {
display: none;
}
.el-popper[x-placement^="bottom"] {
margin-top: 0px;
}
// 时间选择框样式
.el-date-picker {
background: url("~@/image/slbg.png") no-repeat;
background-size: 100% 100%;
padding-top: 13px;
padding-bottom: 13px;
border: none;
margin-top: 5px !important;
table {
background: url("~@/image/rqjx.png") no-repeat;
background-size: 100% 100%;
padding: 8px;
}
table td {
box-sizing: border-box;
border-bottom: 0px solid #074487 !important;
}
.el-input__inner {
background-color: #031a46;
}
.el-picker-panel {
border: none;
}
.el-picker-panel__footer {
display: none;
background-color: #031a46;
}
.el-date-table td.disabled div {
background-color: #074487;
}
.el-date-picker__header {
margin-bottom: 0px;
}
.el-date-picker__header-label {
color: #A6CFD6;
}
.el-picker-panel__content {
padding-top: 0px;
margin-top: 0px;
.disabled {
background-color: #074487;
div {
span {
color: rgba(172, 239, 250, .5)
}
}
}
}
.el-picker-panel__icon-btn {
color: #A6CFD6;
}
.el-date-table th {
color: #02D9FD;
}
.el-date-table td span {
color: #DBFAFF
}
.el-date-table td span:hover {
background-color: #074487;
border: 1px solid #02D9FD;
color: #02D9FD
}
.el-date-table td.current:not(.disabled) span {
background-color: #074487;
// border:1px solid saddlebrown;
box-shadow: inset 0 0 7px #02D9FD;
border: 1px solid #02D9FD;
color: #02D9FD
}
}
// 时间选择框分两个框
.el-date-range-picker {
.el-date-range-picker__time-header>.el-icon-arrow-right {
color: #E3F1FF;
}
background-color: #074487;
color: #fff;
.el-input__inner {
background: color #074487;
}
.el-input.is-disabled .el-input__inner {
background-color: #074487;
}
.el-date-range-picker__time-header {
background-color: #031a46;
}
.el-time-panel {
background-color: #074487 !important;
color: #E3F1FF;
}
.el-picker-panel__icon-btn {
color: #E3F1FF;
}
.el-date-table th {
color: #E3F1FF;
}
.el-time-spinner__item {
color: #E3F1FF;
}
.el-time-spinner__item.active:not(.disabled) {
color: #fff;
}
.el-time-panel__btn {
color: #0F93F6;
}
.el-time-panel__btn.confirm {
width: 50px;
height: 25px;
line-height: 25px;
border-radius: 3px;
background-color: #fff;
}
.el-time-panel__footer {
background-color: #031a46;
}
.el-date-table td.in-range div {
background-color: #031a46;
}
.el-date-table td.start-date span,
.el-date-table td.end-date span {
background-color: #074487;
box-shadow: inset 0 0 7px #02D9FD;
border: 1px solid #02D9FD;
}
}
.el-button--text {
line-height: 10px;
}
// 时间组件input框部分
.el-date-editor {
[class^="el-icon-"],
[class*=" el-icon-"] {
// display: none;
}
.el-range-separator {
color: #E3F1FF;
}
.el-range-input {
background: none !important;
color: #fff;
}
}
.el-menu--horizontal .el-menu .el-menu-item,
.el-select-dropdown__item,
.el-menu--horizontal .el-menu .el-submenu__title {
background: url("~@/image/slitembg.png") no-repeat;
height: 26px;
line-height: 26px;
background-size: 100% 100%;
margin-bottom: 12px;
color: #02D9FD !important;
}
.el-select-dropdown {
margin-top: 5px !important;
}
.el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):hover,
.el-select-dropdown__item:hover,
.el-select-dropdown__item.selected,
.el-menu--horizontal .el-menu .el-menu-item.is-active,
.el-menu--horizontal .el-menu--popup .el-menu-item:not(.is-disabled):focus {
background: url("~@/image/xzslitembg.png") no-repeat;
background-size: 100% 100%;
color: #FFFFFF !important;
font-weight: 700;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: transparent !important;
}
// 提示框
.el-message-box {
background: #031A46;
-webkit-box-shadow: inset 0px 0px 12px 0px #02d9fd;
box-shadow: inset 0px 0px 12px 0px #02d9fd;
border-radius: 0px 2px 2px 2px;
border: 1px solid #6BC1FC;
padding: 15px;
.el-message-box__title {
color: white;
}
.el-message-box__content {
color: white;
}
}
// 上级菜单
.el-cascader__dropdown {
background-color: #031a46;
border: 1px solid #5f82c7;
}
.el-cascader-menu {
color: white;
}
.el-radio {
.el-cascader-menu:hover {
color: white;
}
}
.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus {
background: #F5F7FA;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(80, 142, 235);
}
// 下拉框
.el-menu--popup {
padding-top: 20px;
}
\ No newline at end of file
.jgWrapper {
.main-container {
width: 100%;
height: calc(100% - 74px);
transition: margin-left 0.28s;
display: flex;
background-color: $containerbg;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
font-size: 0px;
margin-right: 15px;
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.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;
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 {
padding-left: 10px !important;
color: $menuText;
height: 42px;
background: linear-gradient(90deg, #013874 0%, #081B56 100%);
margin-bottom: 8px;
&:hover {
color: $subMenuActiveText !important;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon,
i,
span {
color: $subMenuActiveText !important;
}
}
}
// 没有子级
.submenu-title-noDropdown {
color: $menuText;
padding-left: 20px;
margin-bottom: 8px;
background: linear-gradient(90deg, #013874 0%, #081B56 100%);
&:hover {
color: $menuActiveText !important;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
}
.submenu-title-noDropdown.is-active,
.el-submenu__title.is-active {
color: $menuActiveText;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
.submenu-title-noDropdown,
.el-submenu__title {
font-weight: 600;
font-size: $sideBarFontSize;
// margin: 0 10px;
>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;
margin-top: -5px;
}
}
.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;
}
.is-active>.el-submenu__title {
color: #fff !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
&.is-active {
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
&:hover {
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
min-width: 130px !important;
background-color: transparent !important;
font-weight: 600;
font-size: $sideBarFontSize;
margin: 0 10px;
// border-radius: 6px;
}
}
.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;
background-color: $menuHover !important;
color: $menuText !important;
&:hover {
background-color: $menuHover !important;
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__title {
display: flex;
align-items: center;
}
.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: normal;
word-break: break-all;
line-height: 20px;
flex: 1;
}
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-23 15:26:37
* @LastEditTime: 2023-05-11 16:31:01
*/
var Layout;
let ApiUrl = localStorage.getItem('ApiUrl')
if (ApiUrl.THEME == 'sb') {
Layout = r => require.ensure([], () => r(require(`@/layout1`)))
} else {
Layout = r => require.ensure([], () => r(require(`@/layout`)))
}
Layout = r => require.ensure([], () => r(require(`@/layout1`)))
export default function filterAsyncRouter (routers) {
routers.forEach(item => {
if (!item.children) {
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-24 16:44:54
* @LastEditTime: 2023-05-11 16:25:43
*/
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");
},
......