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
1 { 1 {
2 "TITLE": "汉中市监管系统", 2 "TITLE": "汉中市监管系统",
3 "THEME": "jg",
4 "LOGIN": "jg",
5 "CODE": "BDCJGPT", 3 "CODE": "BDCJGPT",
6 "AREARMAP": "610702", 4 "AREARMAP": "610702",
7 "XZQ": "汉中市", 5 "XZQ": "汉中市",
......
1 {
2 "TITLE": "汉中市数据上报系统",
3 "THEME": "sb",
4 "LOGIN": "sb",
5 "CODE": "BDCSBPT",
6 "AREARMAP": "610702",
7 "XZQ": "汉中市",
8 "SERVERAPI": "/bdcsjsb",
9 "calcHeight": 160,
10 "echartTextColor": "#4A4A4A",
11 "MANAGEMENTAPI": "http://192.168.2.38:8090/management",
12 "IPCONFIG": "http://192.168.2.38:8027"
13 }
...\ No newline at end of file ...\ No newline at end of file
1 { 1 {
2 "TITLE": "玉树州监管系统", 2 "TITLE": "玉树州监管系统",
3 "THEME": "jg",
4 "LOGIN": "jg",
5 "CODE": "BDCJGPT", 3 "CODE": "BDCJGPT",
6 "AREARMAP": "632701", 4 "AREARMAP": "632701",
7 "XZQ": "玉树州", 5 "XZQ": "玉树州",
......
1 {
2 "TITLE": "玉树州数据上报系统",
3 "THEME": "sb",
4 "LOGIN": "sb",
5 "CODE": "BDCSBPT",
6 "AREARMAP": "632701",
7 "XZQ": "玉树州",
8 "SERVERAPI": "/bdcsjsb",
9 "calcHeight": 160,
10 "echartTextColor": "#4A4A4A",
11 "MANAGEMENTAPI": "http://192.168.2.38:8090/management",
12 "IPCONFIG": "http://192.168.2.38:8027"
13 }
...\ No newline at end of file ...\ No newline at end of file
1 { 1 {
2 "TITLE": "汉中市监管系统", 2 "TITLE": "汉中市监管系统",
3 "THEME": "jg",
4 "LOGIN": "jg",
5 "CODE": "BDCJGPT", 3 "CODE": "BDCJGPT",
6 "AREARMAP": "610702", 4 "AREARMAP": "610702",
7 "XZQ": "汉中市", 5 "XZQ": "汉中市",
......
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-28 10:12:27
5 -->
6 <template>
7 <transition name="fade-transform" mode="out-in">
8 <router-view />
9 </transition>
10 </template>
11 <script>
12 export default {
13 name: 'AppMain',
14 computed: {
15 key () {
16 return this.$route.path
17 }
18 }
19 }
20 </script>
1 <!--面包屑 -->
2 <template>
3 <el-breadcrumb class="app-breadcrumb" separator="/">
4 <transition-group name="breadcrumb">
5 <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
6 <span class="no-redirect">当前位置></span>
7 <!-- <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" class="breadcrumbIcon" /> -->
8 <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{
9 item.meta.title
10 }}</span>
11 <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
12 </el-breadcrumb-item>
13 </transition-group>
14 </el-breadcrumb>
15 </template>
16
17 <script>
18 import pathToRegexp from 'path-to-regexp'
19
20 export default {
21 data () {
22 return {
23 levelList: null
24 }
25 },
26 watch: {
27 $route (route) {
28 // if you go to the redirect page, do not update the breadcrumbs
29 if (route.path.startsWith('/redirect/')) {
30 return
31 }
32 this.getBreadcrumb()
33 }
34 },
35 created () {
36 this.getBreadcrumb()
37 },
38 methods: {
39 getBreadcrumb () {
40 // only show routes with meta.title
41 let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
42 const first = matched[0]
43
44 if (!this.isDashboard(first)) {
45 matched = matched
46 }
47
48 this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
49 },
50 isDashboard (route) {
51 const name = route && route.name
52 if (!name) {
53 return false
54 }
55 return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
56 },
57 pathCompile (path) {
58 const { params } = this.$route
59 var toPath = pathToRegexp.compile(path)
60 return toPath(params)
61 },
62 handleLink (item) {
63 const { redirect, path } = item
64 if (redirect) {
65 this.$router.push(redirect)
66 return
67 }
68 this.$router.push(this.pathCompile(path))
69 }
70 }
71 }
72 </script>
73
74 <style lang="scss" scoped>
75 .app-breadcrumb.el-breadcrumb {
76 display: inline-block;
77 font-size: 14px;
78 line-height: 50px;
79 margin-left: 8px;
80
81 .no-redirect {
82 color: #ffffff;
83 cursor: text;
84 font-size: 16px;
85 }
86
87 .breadcrumbIcon {
88 color: #ffffff;
89 margin-right: 5px;
90 width: 16px;
91 height: 16px;
92 }
93 }
94 </style>
1 <template>
2 <div class="navbar-con">
3 <div class="navbar">
4 <div class="logo">
5 <img :src="require('@/image/bdclogo.png')" alt="" />
6 <h4>{{ BASE_API.TITLE }}</h4>
7 </div>
8 <div class="right-menu">
9 <div class="user">
10 {{ userName }}
11 <span @click="onCancel">
12 <i class="el-icon-switch-button"></i>
13 </span>
14 </div>
15 </div>
16 </div>
17 </div>
18 </template>
19 <script>
20 import { mapGetters } from 'vuex'
21 import Breadcrumb from './Breadcrumb'
22 import { logout } from "@/api/login.js";
23 export default {
24 components: {
25 Breadcrumb
26 },
27 computed: {
28 ...mapGetters(["userInfo"]),
29 userName () {
30 return this.userInfo ? this.userInfo.name : ""
31 }
32 },
33 methods: {
34 handleDataView () {
35 const { href } = this.$router.resolve('/dataView');
36 window.open(href, '_blank');
37 },
38 themeChange (val) {
39 this.$store.dispatch('app/updateTheme', val)
40 },
41 onCancel () {
42 logout()
43 .then((res) => {
44 sessionStorage.removeItem("token");
45 this.$store.dispatch("user/resetState");
46 this.$store.dispatch("permission/resetRoutes");
47 this.$router.replace({
48 path: "/sb"
49 })
50 })
51 .catch((error) => {
52 // console.dir(error);
53 })
54 }
55 }
56 }
57 </script>
58 <style lang="scss" scoped>
59 @import "~@/styles/_handle.scss";
60
61 .navbar-con {
62 position: relative;
63
64 .logo {
65 color: #fff;
66 font-size: 26px;
67 font-weight: 700;
68 display: flex;
69 margin-left: 15px;
70
71 img {
72 width: 47px;
73 height: 47px;
74 }
75
76 h4 {
77 margin-left: 20px;
78 height: 50px;
79 line-height: 50px;
80 }
81 }
82 }
83
84 .navbar {
85 height: $headerHeight;
86 overflow: hidden;
87 position: relative;
88 @include background("navbg");
89
90 display: flex;
91 align-items: center;
92 padding-right: 20px;
93 justify-content: space-between;
94
95 .header-logo {
96 width: 300px;
97 }
98
99 .right-menu-item {
100 &.hover-effect {
101 cursor: pointer;
102 transition: background 0.3s;
103 display: flex;
104 align-items: center;
105 }
106 }
107 }
108 </style>
1 export default {
2 computed: {
3 device() {
4 return this.$store.state.app.device
5 }
6 },
7 mounted() {
8 // In order to fix the click on menu on the ios device will trigger the mouseleave bug
9 // https://github.com/PanJiaChen/vue-element-admin/issues/1135
10 this.fixBugIniOS()
11 },
12 methods: {
13 fixBugIniOS() {
14 const $subMenu = this.$refs.subMenu
15 if ($subMenu) {
16 const handleMouseleave = $subMenu.handleMouseleave
17 $subMenu.handleMouseleave = (e) => {
18 if (this.device === 'mobile') {
19 return
20 }
21 handleMouseleave(e)
22 }
23 }
24 }
25 }
26 }
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-22 11:19:04
5 -->
6 <script>
7 export default {
8 name: 'MenuItem',
9 functional: true,
10 props: {
11 icon: {
12 type: String,
13 default: ''
14 },
15 title: {
16 type: String,
17 default: ''
18 }
19 },
20 render (h, context) {
21 const { icon, title } = context.props
22 const vnodes = []
23
24 if (icon) {
25 if (icon.includes('el-icon')) {
26 vnodes.push(<i class={[icon, 'sub-el-icon']} />)
27 } else {
28 vnodes.push(<svg-icon icon-class={icon} />)
29 }
30 }
31
32 if (title) {
33 vnodes.push(<span slot='title'>{(title)}</span>)
34 }
35 return vnodes
36 }
37 }
38 </script>
1 <template>
2 <component :is="type" v-bind="linkProps(to)">
3 <slot />
4 </component>
5 </template>
6
7 <script>
8 import { isExternal } from '@/utils/validate'
9
10 export default {
11 props: {
12 to: {
13 type: String,
14 required: true
15 }
16 },
17 computed: {
18 isExternal() {
19 return isExternal(this.to)
20 },
21 type() {
22 if (this.isExternal) {
23 return 'a'
24 }
25 return 'router-link'
26 }
27 },
28 methods: {
29 linkProps(to) {
30 if (this.isExternal) {
31 return {
32 href: to,
33 target: '_blank',
34 rel: 'noopener'
35 }
36 }
37 return {
38 to: to
39 }
40 }
41 }
42 }
43 </script>
1 <template>
2 <div class="sidebar-logo-container" :class="{ 'collapse': collapse }">
3 <transition name="sidebarLogoFade">
4 <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
5 <img v-if="logo" :src="logo" class="sidebar-logo">
6 <h1 v-else class="sidebar-title">
7 {{ title }}
8 </h1>
9 </router-link>
10 <router-link v-else key="expand" class="sidebar-logo-link" to="/">
11 <h1 class="sidebar-title">
12 {{ title }}
13 </h1>
14 </router-link>
15 </transition>
16 </div>
17 </template>
18
19 <script>
20 import defaultSettings from '@/settings'
21 const { title } = defaultSettings
22 export default {
23 name: 'SidebarLogo',
24 props: {
25 collapse: {
26 type: Boolean,
27 required: true
28 }
29 },
30 data () {
31 return {
32 title: title,
33 }
34 }
35 }
36 </script>
37
38 <style lang="scss" scoped>
39 .sidebarLogoFade-enter-active {
40 transition: opacity 1.5s;
41 }
42
43 .sidebarLogoFade-enter,
44 .sidebarLogoFade-leave-to {
45 opacity: 0;
46 }
47
48 .sidebar-logo-container {
49 position: relative;
50 width: 100%;
51 text-align: center;
52 overflow: hidden;
53 height: 100px;
54
55 & .sidebar-logo-link {
56 height: 100%;
57 width: 100%;
58
59 & .sidebar-logo {
60 width: 41px;
61 height: 39px;
62 vertical-align: middle;
63 // margin-left: 47px;
64 // margin-right: 48px;
65 margin-top: 22px;
66 }
67
68 & .sidebar-title {
69 margin: 0;
70 margin-top: 10px;
71 margin-bottom: 20px;
72 color: #fff;
73 font-weight: 600;
74 line-height: 25px;
75 font-size: 16px;
76 font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
77 vertical-align: middle;
78 }
79 }
80
81 &.collapse {
82 .sidebar-logo {
83 margin-right: 0px;
84 width: 32.8px;
85 height: 31.2px;
86 }
87 }
88 }
89 </style>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-30 10:39:40
5 -->
6 <template>
7 <div v-if="!item.hidden">
8 <template
9 v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren)">
10 <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
11 <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
12 <item :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" :title="onlyOneChild.meta.title"
13 class="menu-icon" />
14 </el-menu-item>
15 </app-link>
16 </template>
17
18 <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
19 <template slot="title">
20 <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
21 </template>
22 <sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child"
23 :base-path="resolvePath(child.path)" class="nest-menu" />
24 </el-submenu>
25 </div>
26 </template>
27
28 <script>
29 import path from 'path'
30 import { isExternal } from '@/utils/validate'
31 import Item from './Item'
32 import AppLink from './Link'
33 import FixiOSBug from './FixiOSBug'
34
35 export default {
36 name: 'SidebarItem',
37 components: { Item, AppLink },
38 mixins: [FixiOSBug],
39 props: {
40 // route object
41 item: {
42 type: Object,
43 required: true
44 },
45 isNest: {
46 type: Boolean,
47 default: false
48 },
49 basePath: {
50 type: String,
51 default: ''
52 }
53 },
54 data () {
55 // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
56 // TODO: refactor with render function
57 this.onlyOneChild = null
58 return {}
59 },
60 methods: {
61 hasOneShowingChild (children = [], parent) {
62 const showingChildren = children.filter(item => {
63 if (item.hidden) {
64 return false
65 } else {
66 // Temp set(will be used if only has one showing child)
67 this.onlyOneChild = item
68 return true
69 }
70 })
71 // When there is only one child router, the child router is displayed by default
72 if (showingChildren.length >= 1 && (showingChildren[0].path == 'ywjr' || showingChildren[0].path == "sbbwcx" || showingChildren[0].path == "dbrzcx")) {
73 return true
74 }
75
76 // Show parent if there are no child router to display
77 if (showingChildren.length === 0) {
78 this.onlyOneChild = { ...parent, path: '', noShowingChildren: true }
79 return true
80 }
81
82 return false
83 },
84 resolvePath (routePath) {
85 if (isExternal(routePath)) {
86 return routePath
87 }
88 if (isExternal(this.basePath)) {
89 return this.basePath
90 }
91 return path.resolve(this.basePath, routePath)
92 }
93 }
94 }
95 </script>
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-03-27 14:09:57
5 -->
6 <template>
7 <div>
8 <el-scrollbar wrap-class="scrollbar-wrapper">
9 <el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
10 :unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
11 <!-- 权限菜单 -->
12 <sidebar-item v-for="route in permission_routes.slice(5)" :key="route.path" :item="route"
13 :base-path="route.path" />
14 <!-- 菜单全部展示 -->
15 <!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
16 </el-menu>
17 </el-scrollbar>
18 </div>
19 </template>
20
21 <script>
22 import { mapGetters } from 'vuex'
23 import Logo from './Logo'
24 import defaultSettings from '@/settings'
25 import SidebarItem from './SidebarItem'
26 import variables from '@/styles/variables.scss'
27 import { asyncRoutes } from '@/router'
28 export default {
29 components: { SidebarItem, Logo },
30 data () {
31 return {
32 title: defaultSettings.title
33 }
34 },
35 computed: {
36 ...mapGetters(['permission_routes', 'sidebar']),
37 activeMenu () {
38 const route = this.$route
39 const { meta, path } = route
40 if (meta.activeMenu) {
41 return meta.activeMenu
42 }
43 return path
44 },
45 variables () {
46 return variables
47 },
48 asyncRoutes () {
49 return asyncRoutes
50 }
51 }
52 }
53 </script>
1 <template>
2 <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
3 <slot />
4 </el-scrollbar>
5 </template>
6
7 <script>
8 const tagAndTagSpacing = 4 // tagAndTagSpacing
9
10 export default {
11 name: 'ScrollPane',
12 data () {
13 return {
14 left: 0
15 }
16 },
17 computed: {
18 scrollWrapper () {
19 return this.$refs.scrollContainer.$refs.wrap
20 }
21 },
22 mounted () {
23 this.scrollWrapper.addEventListener('scroll', this.emitScroll, true)
24 },
25 beforeDestroy () {
26 this.scrollWrapper.removeEventListener('scroll', this.emitScroll)
27 },
28 methods: {
29 handleScroll (e) {
30 const eventDelta = e.wheelDelta || -e.deltaY * 40
31 const $scrollWrapper = this.scrollWrapper
32 $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
33 },
34 emitScroll () {
35 this.$emit('scroll')
36 },
37 moveToTarget (currentTag) {
38 const $container = this.$refs.scrollContainer.$el
39 const $containerWidth = $container.offsetWidth
40 const $scrollWrapper = this.scrollWrapper
41 const tagList = this.$parent.$refs.tag
42
43 let firstTag = null
44 let lastTag = null
45
46 // find first tag and last tag
47 if (tagList.length > 0) {
48 firstTag = tagList[0]
49 lastTag = tagList[tagList.length - 1]
50 }
51
52 if (firstTag === currentTag) {
53 $scrollWrapper.scrollLeft = 0
54 } else if (lastTag === currentTag) {
55 $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
56 } else {
57 // find preTag and nextTag
58 const currentIndex = tagList.findIndex(item => item === currentTag)
59 const prevTag = tagList[currentIndex - 1]
60 const nextTag = tagList[currentIndex + 1]
61
62 // the tag's offsetLeft after of nextTag
63 const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
64
65 // the tag's offsetLeft before of prevTag
66 const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
67
68 if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
69 $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
70 } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
71 $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
72 }
73 }
74 }
75 }
76 }
77 </script>
78
79 <style lang="scss" scoped>
80 .scroll-container {
81 white-space: nowrap;
82 position: relative;
83 overflow: hidden;
84 width: 100%;
85 height: 100%;
86 }
87
88 /deep/ .el-scrollbar__view {
89 display: inline-block !important;
90 }
91
92 /deep/ .el-scrollbar__wrap {
93 overflow-x: hidden !important;
94 }
95 </style>
1 <template>
2 <div id="tags-view-container" class="tags-view-container">
3 <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
4 <router-link v-for="tag in visitedViews" ref="tag" :key="tag.path" :class="isActive(tag) ? 'active' : ''"
5 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }" tag="span" class="tags-view-item"
6 @click.middle.native="!isAffix(tag) ? closeSelectedTag(tag) : ''"
7 @contextmenu.prevent.native="openMenu(tag, $event)">
8 {{ tag.title }}
9 <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
10 </router-link>
11 </scroll-pane>
12 <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
13 <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
14 <li @click="closeOthersTags">关闭其他</li>
15 <li @click="closeAllTags(selectedTag)">关闭全部</li>
16 </ul>
17 </div>
18 </template>
19
20 <script>
21 import ScrollPane from './ScrollPane'
22 import path from 'path'
23
24 export default {
25 components: { ScrollPane },
26 data () {
27 return {
28 visible: false,
29 top: 0,
30 left: 0,
31 selectedTag: {},
32 affixTags: []
33 }
34 },
35 computed: {
36 visitedViews () {
37 return this.$store.state.tagsView.visitedViews.slice(1)
38 },
39 routes () {
40 return this.$store.state.permission.routes
41 }
42 },
43 watch: {
44 $route () {
45 this.addTags()
46 this.moveToCurrentTag()
47 },
48 visible (value) {
49 if (value) {
50 document.body.addEventListener('click', this.closeMenu)
51 } else {
52 document.body.removeEventListener('click', this.closeMenu)
53 }
54 }
55 },
56 mounted () {
57 this.initTags()
58 this.addTags()
59 },
60 methods: {
61 isActive (route) {
62 return route.path === this.$route.path
63 },
64 isAffix (tag) {
65 return tag.meta && tag.meta.affix
66 },
67 filterAffixTags (routes, basePath = '/') {
68 let tags = []
69 routes.forEach(route => {
70 if (route.meta && route.meta.affix) {
71 const tagPath = path.resolve(basePath, route.path)
72 tags.push({
73 fullPath: tagPath,
74 path: tagPath,
75 name: route.name,
76 meta: { ...route.meta }
77 })
78 }
79 if (route.children) {
80 const tempTags = this.filterAffixTags(route.children, route.path)
81 if (tempTags.length >= 1) {
82 tags = [...tags, ...tempTags]
83 }
84 }
85 })
86 return tags
87 },
88 initTags () {
89 const affixTags = this.affixTags = this.filterAffixTags(this.routes)
90 for (const tag of affixTags) {
91 // Must have tag name
92 if (tag.name) {
93 this.$store.dispatch('tagsView/addVisitedView', tag)
94 }
95 }
96 },
97 addTags () {
98 const { name } = this.$route
99 if (name) {
100 this.$store.dispatch('tagsView/addView', this.$route)
101 }
102 return false
103 },
104 moveToCurrentTag () {
105 const tags = this.$refs.tag
106 this.$nextTick(() => {
107 for (const tag of tags) {
108 if (tag.to.path === this.$route.path) {
109 this.$refs.scrollPane.moveToTarget(tag)
110 // when query is different then update
111 if (tag.to.fullPath !== this.$route.fullPath) {
112 this.$store.dispatch('tagsView/updateVisitedView', this.$route)
113 }
114 break
115 }
116 }
117 })
118 },
119 refreshSelectedTag (view) {
120 this.$store.dispatch('tagsView/delCachedView', view).then(() => {
121 const { fullPath } = view
122 this.$nextTick(() => {
123 this.$router.replace({
124 path: '/redirect' + fullPath
125 })
126 })
127 })
128 },
129 closeSelectedTag (view) {
130 this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
131 if (this.isActive(view)) {
132 this.toLastView(visitedViews, view)
133 }
134 })
135 },
136 closeOthersTags () {
137 this.$router.push(this.selectedTag)
138 this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => {
139 this.moveToCurrentTag()
140 })
141 },
142 closeAllTags (view) {
143 this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
144 if (this.affixTags.some(tag => tag.path === view.path)) {
145 return
146 }
147 this.toLastView(visitedViews, view)
148 })
149 },
150 toLastView (visitedViews, view) {
151 const latestView = visitedViews.slice(-1)[0]
152 if (latestView) {
153 this.$router.push(latestView.fullPath)
154 } else {
155 // now the default is to redirect to the home page if there is no tags-view,
156 // you can adjust it according to your needs.
157 if (view.name === 'Dashboard') {
158 // to reload home page
159 this.$router.replace({ path: '/redirect' + view.fullPath })
160 } else {
161 this.$router.push('/')
162 }
163 }
164 },
165 openMenu (tag, e) {
166 const menuMinWidth = 105
167 const offsetLeft = this.$el.getBoundingClientRect().left - 210 // container margin left
168 const offsetWidth = this.$el.offsetWidth // container width
169 const maxLeft = offsetWidth - menuMinWidth // left boundary
170 const left = e.clientX - offsetLeft + 15 // 15: margin right
171
172 if (left > maxLeft) {
173 this.left = maxLeft
174 } else {
175 this.left = left
176 }
177
178 this.top = e.clientY
179 this.visible = true
180 this.selectedTag = tag
181 },
182 closeMenu () {
183 this.visible = false
184 },
185 handleScroll () {
186 this.closeMenu()
187 }
188 }
189 }
190 </script>
191
192 <style lang="scss" scoped>
193 @import "~@/styles/_handle.scss";
194
195 .tags-view-container {
196 height: 50px;
197 width: 100%;
198 background: #fff;
199 border-bottom: 1px solid #d8dce5;
200 box-sizing: border-box;
201 padding-top: 7px;
202 margin-bottom: 10px;
203 border-radius: 4px;
204
205 .tags-view-wrapper {
206 .tags-view-item {
207 display: inline-block;
208 position: relative;
209 cursor: pointer;
210 line-height: 26px;
211 color: #4A4A4A;
212 @include font_color("tagsText");
213 padding: 0 8px;
214 font-size: 12px;
215 margin-left: 5px;
216 margin-top: 4px;
217 border-radius: 4px;
218 @include borderColor("tagsBorderColor");
219
220 &:first-of-type {
221 margin-left: 15px;
222 }
223
224 &:last-of-type {
225 margin-right: 15px;
226 }
227
228 &.active {
229 @include background("tagsBg");
230 @include borderColor("tagsActiveText");
231 @include font_color("tagsActiveText");
232
233 &::before {
234 content: '';
235 @include background("tagsActiveText");
236 display: inline-block;
237 width: 8px;
238 height: 8px;
239 border-radius: 50%;
240 position: relative;
241 margin-right: 2px;
242 }
243 }
244 }
245 }
246
247 .contextmenu {
248 margin: 0;
249 background: #fff;
250 z-index: 3000;
251 position: absolute;
252 list-style-type: none;
253 padding: 5px 0;
254 border-radius: 4px;
255 font-size: 12px;
256 font-weight: 400;
257 color: #333;
258 box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
259
260 li {
261 margin: 0;
262 padding: 7px 16px;
263 cursor: pointer;
264
265 &:hover {
266 background: #eee;
267 }
268 }
269 }
270 }
271 </style>
272
273 <style lang="scss">
274 //reset element css of el-icon-close
275 .tags-view-wrapper {
276 .tags-view-item {
277 .el-icon-close {
278 width: 16px;
279 height: 16px;
280 vertical-align: 2px;
281 border-radius: 50%;
282 text-align: center;
283 transition: all .3s cubic-bezier(.645, .045, .355, 1);
284 transform-origin: 100% 50%;
285
286 &:before {
287 transform: scale(.6);
288 display: inline-block;
289 vertical-align: -3px;
290 }
291
292 &:hover {
293 background-color: #b4bccc;
294 color: #fff;
295 }
296 }
297 }
298 }
299 </style>
1 export { default as AppMain } from './AppMain'
2 export { default as Navbar } from './Navbar'
3 export { default as Sidebar } from './Sidebar/index.vue'
4 export { default as TagsView } from './TagsView/index.vue'
1 <!--
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-04-03 10:12:39
5 -->
6 <template>
7 <div class="app-wrapper">
8 <navbar />
9 <div class="main-container">
10 <sidebar class="sidebar-container" />
11 <div class="app-content">
12 <tags-view v-if="needTagsView" />
13 <app-main />
14 </div>
15 </div>
16 </div>
17 </template>
18 <script>
19 import { AppMain, Navbar, Sidebar, TagsView } from './components'
20 import ResizeMixin from './mixin/ResizeHandler'
21 import { mapState } from 'vuex'
22 export default {
23 name: 'Layout',
24 components: {
25 AppMain,
26 Navbar,
27 Sidebar,
28 TagsView
29 },
30 mixins: [ResizeMixin],
31 created () {
32 this.$store.dispatch("products/setData", "BDCSBPT");
33 },
34 computed: {
35 ...mapState({
36 sidebar: state => state.app.sidebar,
37 needTagsView: state => state.settings.tagsView,
38 fixedHeader: state => state.settings.fixedHeader
39 })
40 }
41 }
42 </script>
43 <style lang="scss">
44 @import "~@/styles/mixin.scss";
45 @import "~@/styles/sbSidebar.scss";
46
47 .app-wrapper {
48 @include clearfix;
49 position: relative;
50 height: 100%;
51 width: 100%;
52 // background-color: $containerbg;
53 padding: 0;
54
55 &.mobile.openSidebar {
56 position: fixed;
57 top: 0;
58 }
59 }
60
61 .drawer-bg {
62 background: #000;
63 opacity: 0.3;
64 width: 100%;
65 top: 0;
66 height: 100%;
67 position: absolute;
68 z-index: 999;
69 }
70
71 .fixed-header {
72 width: 100%;
73 transition: width 0.28s;
74 }
75
76 .app-content {
77 overflow: hidden;
78 box-sizing: border-box;
79 flex: 1;
80 width: 100%;
81 background: #EAEBF0;
82 padding: 10px;
83 }
84 </style>
1 import store from '@/store'
2
3 const { body } = document
4 const WIDTH = 992 // refer to Bootstrap's responsive design
5
6 export default {
7 watch: {
8 $route(route) {
9 if (this.device === 'mobile' && this.sidebar.opened) {
10 store.dispatch('app/closeSideBar', { withoutAnimation: false })
11 }
12 }
13 },
14 beforeMount() {
15 window.addEventListener('resize', this.$_resizeHandler)
16 },
17 beforeDestroy() {
18 window.removeEventListener('resize', this.$_resizeHandler)
19 },
20 mounted() {
21 const isMobile = this.$_isMobile()
22 if (isMobile) {
23 store.dispatch('app/toggleDevice', 'mobile')
24 store.dispatch('app/closeSideBar', { withoutAnimation: true })
25 }
26 },
27 methods: {
28 // use $_ for mixins properties
29 // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30 $_isMobile() {
31 const rect = body.getBoundingClientRect()
32 return rect.width - 1 < WIDTH
33 },
34 $_resizeHandler() {
35 if (!document.hidden) {
36 const isMobile = this.$_isMobile()
37 store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
38
39 if (isMobile) {
40 store.dispatch('app/closeSideBar', { withoutAnimation: true })
41 }
42 }
43 }
44 }
45 }
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-04-12 11:15:57 4 * @LastEditTime: 2023-05-11 17:18:37
5 */ 5 */
6 import Vue from 'vue' 6 import Vue from 'vue'
7 import router from "./router"; 7 import router from "./router";
...@@ -20,7 +20,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -20,7 +20,7 @@ router.beforeEach(async (to, from, next) => {
20 let hasAddDict = store.state.dict.addDict; 20 let hasAddDict = store.state.dict.addDict;
21 let hasUser = store.state.user.hasUser; 21 let hasUser = store.state.user.hasUser;
22 let hasAddRoute = store.state.permission.addRoutes; 22 let hasAddRoute = store.state.permission.addRoutes;
23 if (to.path == "/sb" || to.path == "/jg" || to.path == "/sb1") { 23 if (to.path == "/jg") {
24 localStorage.removeItem("token"); 24 localStorage.removeItem("token");
25 next(); 25 next();
26 } else { 26 } else {
...@@ -49,7 +49,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -49,7 +49,7 @@ router.beforeEach(async (to, from, next) => {
49 { path: "*", redirect: "/404", hidden: true }, 49 { path: "*", redirect: "/404", hidden: true },
50 ]); 50 ]);
51 const routeTo = Cookies.get("routerTo"); 51 const routeTo = Cookies.get("routerTo");
52 if (routeTo && routeTo !== "/" && routeTo !== "/sb" && routeTo !== "/jg") { 52 if (routeTo && routeTo !== "/" && routeTo !== "/jg") {
53 next({ ...to, replace: true }); 53 next({ ...to, replace: true });
54 } else { 54 } else {
55 next(); 55 next();
...@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => { ...@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => {
57 57
58 } 58 }
59 } else { 59 } else {
60 next(`/${Vue.prototype.BASE_API.LOGIN}`); 60 next('/jg');
61 } 61 }
62 } 62 }
63 NProgress.done(); 63 NProgress.done();
...@@ -66,4 +66,4 @@ router.afterEach((to) => { ...@@ -66,4 +66,4 @@ router.afterEach((to) => {
66 // 解决刷新页面报404问题 66 // 解决刷新页面报404问题
67 Cookies.set("routerTo", to.fullPath); 67 Cookies.set("routerTo", to.fullPath);
68 NProgress.done(); 68 NProgress.done();
69 }); 69 })
......
...@@ -25,14 +25,9 @@ export const constantRoutes = [ ...@@ -25,14 +25,9 @@ export const constantRoutes = [
25 component: () => import("@/views/loginjg/index.vue"), 25 component: () => import("@/views/loginjg/index.vue"),
26 }, 26 },
27 { 27 {
28 path: "/sb",
29 name: "loginsb",
30 component: () => import("@/views/loginsb/index.vue"),
31 },
32 {
33 path: '/', 28 path: '/',
34 redirect: to => { 29 redirect: to => {
35 return { path: `/${Vue.prototype.BASE_API.LOGIN}` } 30 return { path: '/jg' }
36 }, 31 },
37 }, 32 },
38 // 监管首页 33 // 监管首页
......
...@@ -26,12 +26,7 @@ const mutations = { ...@@ -26,12 +26,7 @@ const mutations = {
26 const actions = { 26 const actions = {
27 // 添加全部菜单 27 // 添加全部菜单
28 generateRoutes ({ commit }, getMenuInfo) { 28 generateRoutes ({ commit }, getMenuInfo) {
29 let Layout; 29 let Layout = r => require.ensure([], () => r(require(`@/layout`)))
30 if (Vue.prototype.BASE_API.THEME == 'sb') {
31 Layout = r => require.ensure([], () => r(require(`@/layout1`)))
32 } else {
33 Layout = r => require.ensure([], () => r(require(`@/layout`)))
34 }
35 function asyncRouter (routers) { 30 function asyncRouter (routers) {
36 routers.forEach(item => { 31 routers.forEach(item => {
37 if (!item.children) { 32 if (!item.children) {
......
1 @import "~@/styles/_handle.scss";
2
3 // cover some element-ui styles
4 .el-breadcrumb__inner,
5 .el-breadcrumb__inner a {
6 font-weight: 400 !important;
7 color: #686666;
8 }
9
10 .el-table .cell {
11 line-height: 16px;
12 }
13
14 //input
15 .el-input__inner {
16 color: #FFFFFF !important;
17 padding: 0 7px !important;
18 }
19
20 // input 样式
21 // 全局css 加上以下代码，可以隐藏上下箭头
22
23 // 取消input的上下箭头
24 input::-webkit-inner-spin-button {
25 -webkit-appearance: none !important;
26
27 }
28
29 input::-webkit-outer-spin-button {
30 -webkit-appearance: none !important;
31
32 }
33
34 input[type="number"] {
35 -moz-appearance: textfield;
36
37 }
38
39 .el-upload {
40 input[type="file"] {
41 display: none !important;
42 }
43 }
44
45 .el-upload__input {
46 display: none;
47 }
48
49 .cell {
50 .el-tag {
51 margin-right: 0px;
52 }
53 }
54
55 .small-padding {
56 .cell {
57 padding-left: 5px;
58 padding-right: 5px;
59 }
60 }
61
62 .fixed-width {
63 .el-button--mini {
64 padding: 7px 10px;
65 min-width: 60px;
66 }
67 }
68
69 .status-col {
70 .cell {
71 padding: 0 10px;
72 text-align: center;
73
74 .el-tag {
75 margin-right: 0px;
76 }
77 }
78 }
79
80 .el-icon-date,
81 .el-icon-time {
82 display: none;
83 }
84
85 // to fixed https://github.com/ElemeFE/element/issues/2461
86 // refine element ui upload
87 .el-input.is-disabled .el-input__inner {
88 background-color: transparent !important;
89 }
90
91 .upload-container {
92 .el-upload {
93 width: 100%;
94
95 .el-upload-dragger {
96 width: 100%;
97 height: 200px;
98 }
99 }
100 }
101
102 // dropdown
103 .el-dropdown-menu {
104 a {
105 display: block
106 }
107 }
108
109 // fix date-picker ui bug in filter-item
110 .el-range-editor.el-input__inner {
111 display: inline-flex !important;
112 }
113
114 // to fix el-date-picker css style
115 .el-range-separator {
116 box-sizing: content-box;
117 }
118
119 .el-submenu__icon-arrow {
120 margin-top: -5px;
121 }
122
123 // element 样式补丁
124 .el-menu--horizontal {
125 border-bottom: none !important;
126 }
127
128 .el-radio-group {
129 .el-radio-button__inner {
130 height: 36px;
131 line-height: 36px;
132 padding: 0 20px;
133 font-size: 14px;
134 }
135
136 .el-radio-button:first-child {
137 border-radius: 4px 0 0 4px;
138 }
139
140 .el-radio-button:last-child {
141 border-radius: 0 4px 4px 0;
142 }
143 }
144
145 .el-tabs__item:focus.is-active.is-focus:not(:active) {
146 box-shadow: none !important;
147 }
148
149 // Divider 分割线 样式的修改
150 .el-divider--horizontal {
151 margin: 10px 0 !important;
152 }
153
154 .el-row {
155 margin-bottom: 0 !important;
156 }
157
158 // form
159 .el-form-item__content {
160 margin-left: 0 !important;
161 }
162
163 .el-icon-full-screen,
164 .el-icon-rank {
165 cursor: pointer;
166 }
167
168 // 表格样式
169 .el-table th {
170 height: 48px !important;
171 font-size: 14px;
172 color: #4A4A4A;
173 }
174
175 .el-pagination.is-background .btn-prev,
176 .el-pagination.is-background .btn-next,
177 .el-pagination.is-background .el-pager li {
178 @include borderColor("pagBorderColor");
179 background-color: #FFFFFF;
180 @include font_color("pagText");
181 }
182
183 .el-pagination.is-background .el-pager li:not(.disabled).active {
184 @include background("pagBg");
185 border-radius: 4px;
186 @include font_color("pagActiveText");
187 @include borderColor("pagActiveText");
188 }
189
190 .el-table__header th {
191 background-color: #F1F3F7 !important;
192 }
193
194 .el-table tr td {
195 font-size: 14px;
196 color: #7A7A7A;
197 }
198
199 .lb-table .el-table {
200 border-bottom: none;
201 border-radius: 4px 4px 0 0;
202 }
203
204 .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
205 display: none !important
206 }
207
208 .el-message-box__btns {
209 display: flex;
210 flex-direction: row-reverse;
211 }
212
213 .el-message-box__btns .el-button--primary {
214 margin-right: 10px;
215 }
216
217 .el-form-item__content {
218 flex: 1;
219 }
...\ No newline at end of file ...\ No newline at end of file
1 @import "~@/styles/_handle.scss";
2
3 .main-container {
4 width: 100%;
5 height: calc(100% - 74px);
6 transition: margin-left 0.28s;
7 display: flex;
8 }
9
10 .el-form-item__content {
11 margin-left: 0 !important;
12 }
13
14 .sidebar-container {
15 transition: width 0.28s;
16 width: $sideBarWidth !important;
17 font-size: 0px;
18 @include background_color("menuBg");
19
20 .horizontal-collapse-transition {
21 transition: 0s width ease-in-out, 0s padding-left ease-in-out,
22 0s padding-right ease-in-out;
23 }
24
25 .el-scrollbar {
26 height: 100%;
27 }
28
29 .scrollbar-wrapper {
30 overflow-x: hidden !important;
31 margin-right: 0 !important;
32
33 &::-webkit-scrollbar {
34 display: none;
35 }
36 }
37
38 a {
39 display: inline-block;
40 width: 100%;
41 overflow: hidden;
42 }
43
44 .svg-icon {
45 margin-right: 5px;
46 }
47
48 .sub-el-icon {
49 margin-right: 12px;
50 margin-left: -2px;
51 }
52
53 .el-menu {
54 background-color: transparent !important;
55 border: none;
56 @include font_color("menuText");
57 height: 100%;
58 width: 100% !important;
59 }
60
61 // menu hover
62 .el-menu--collapse .el-submenu__title,
63 .el-menu--collapse .submenu-title-noDropdown {
64 margin-left: 0px !important;
65 }
66
67 // 有子级
68 .el-submenu__title {
69 @include font_color("menuText");
70 background-color: transparent !important;
71
72 &:hover {
73 color: $subMenuActiveText !important;
74 @include font_color("submenuColor");
75 border-right: 5px solid #36CEB6;
76 @include background_color("submenuBg");
77 box-sizing: border-box;
78
79 .svg-icon,
80 i,
81 span {
82 @include font_color("submenuColor");
83 }
84 }
85 }
86
87 // 没有子级
88 .submenu-title-noDropdown {
89 @include font_color("menuText");
90 padding-left: 20px;
91 height: 56px;
92 background-color: transparent !important;
93
94 &:hover {
95 @include font_color("submenuColor");
96 @include background_color("submenuBg");
97 border-right: 5px solid #36CEB6;
98 box-sizing: border-box;
99
100 .svg-icon {
101 color: #1ea6f8 !important;
102 }
103
104 i {
105 color: #1ea6f8 !important;
106 }
107 }
108 }
109
110 .submenu-title-noDropdown.is-active,
111 .el-submenu__title.is-active {
112 @include background_color("submenuBg");
113 @include font_color("submenuColor");
114 border-right: 5px solid #36CEB6;
115 box-sizing: border-box;
116
117 .svg-icon {
118 color: #1ea6f8 !important;
119 }
120
121 i {
122 color: #1ea6f8 !important;
123 }
124 }
125
126 .submenu-title-noDropdown,
127 .el-submenu__title {
128 font-weight: 600;
129 font-size: $sideBarFontSize;
130
131 >i {
132 color: $subMenuActiveText !important;
133 transform: rotate(90deg);
134 -webkit-transform: rotate(90deg);
135 -moz-transform: rotate(90deg);
136 -ms-transform: rotate(90deg);
137 -o-transform: rotate(90deg);
138 margin-right: 10px;
139 }
140
141 .svg-icon {
142 font-size: 18px;
143 color: #6D7278 !important;
144 }
145 }
146
147 .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
148 transform: rotateZ(0deg) !important;
149 -webkit-transform: rotateZ(0deg) !important;
150 -moz-transform: rotateZ(0deg) !important;
151 -ms-transform: rotateZ(0deg) !important;
152 -o-transform: rotateZ(0deg) !important;
153 }
154
155 & .nest-menu .el-submenu>.el-submenu__title,
156 & .el-submenu .el-menu-item {
157
158 &.is-active {
159 @include background_color("menuActive");
160 @include font_color("menuActiveText");
161 }
162
163 &:hover {
164 @include background_color("menuActive");
165 @include font_color("menuActiveText");
166 color: $menuActiveText !important;
167 }
168
169 min-width: 130px !important;
170 background-color: transparent !important;
171 font-weight: 600;
172 @include font_color("menuText");
173 font-size: $sideBarFontSize;
174 }
175 }
176
177 .hideSidebar {
178 .sidebar-container {
179 width: 54px !important;
180 }
181
182 .submenu-title-noDropdown {
183 padding: 0 !important;
184 position: relative;
185
186 .el-tooltip {
187 padding: 0 !important;
188
189 .svg-icon {
190 margin-left: 16px;
191 }
192
193 .sub-el-icon {
194 margin-left: 19px;
195 }
196 }
197 }
198
199 .el-submenu {
200 overflow: hidden;
201
202 &>.el-submenu__title {
203 padding: 0 !important;
204
205 .svg-icon {
206 margin-left: 16px;
207 }
208
209 .sub-el-icon {
210 margin-left: 19px;
211 }
212
213 .el-submenu__icon-arrow {
214 display: none;
215 }
216 }
217 }
218
219 .el-menu--collapse {
220 .el-submenu {
221 &>.el-submenu__title {
222 &>span {
223 height: 0;
224 width: 0;
225 overflow: hidden;
226 visibility: hidden;
227 display: inline-block;
228 }
229 }
230 }
231 }
232 }
233
234 .el-menu--collapse .el-menu .el-submenu {
235 min-width: $sideBarWidth !important;
236 }
237
238 // mobile responsive
239 .mobile {
240 .main-container {
241 margin-left: 0px;
242 }
243
244 .sidebar-container {
245 transition: transform 0.28s;
246 width: $sideBarWidth !important;
247 }
248
249 &.hideSidebar {
250 .sidebar-container {
251 pointer-events: none;
252 transition-duration: 0.3s;
253 transform: translate3d(-$sideBarWidth, 0, 0);
254 }
255 }
256 }
257
258 .withoutAnimation {
259
260 .main-container,
261 .sidebar-container {
262 transition: none;
263 }
264 }
265
266 // when menu collapsed
267 .el-menu--vertical {
268 &>.el-menu {
269 .svg-icon {
270 margin-right: 16px;
271 }
272
273 .sub-el-icon {
274 margin-right: 12px;
275 margin-left: -2px;
276 }
277 }
278
279 .nest-menu .el-submenu>.el-submenu__title,
280 .el-menu-item {
281 width: calc(100% - 12px);
282 border-top-right-radius: 8px;
283 border-bottom-right-radius: 8px;
284 font-weight: 600 !important;
285 font-size: 15px !important;
286 @include background("menuActive");
287 @include font_color("menuText");
288
289 &:hover {
290 @include background("menuActive");
291 opacity: .9;
292
293 .svg-icon,
294 i,
295 span {
296 color: $menuText;
297 }
298 }
299 }
300
301 // the scroll bar appears when the subMenu is too long
302 >.el-menu--popup {
303 max-height: 100vh;
304 overflow-y: auto;
305 background-color: #32ACFE !important;
306 border-top-right-radius: 8px;
307 border-bottom-right-radius: 8px;
308 min-width: 140px;
309 padding: 12px 0;
310
311 &::-webkit-scrollbar-track-piece {
312 background: #d3dce6;
313 }
314
315 &::-webkit-scrollbar {
316 width: 6px;
317 }
318
319 &::-webkit-scrollbar-thumb {
320 background: #99a9bf;
321 border-radius: 20px;
322 }
323 }
324 }
325
326 .el-submenu.is-active .el-submenu__title {
327 @include background_color("submenuBg");
328 @include font_color("submenuColor");
329 border-right: 5px solid #36CEB6;
330 }
331
332 .el-submenu.is-active .el-submenu__title:hover {
333 @include font_color("submenuColor");
334 }
335
336 .el-submenu.is-active .el-submenu__title .svg-icon {
337 @include font_color("submenuColor");
338 }
339
340 .el-submenu__title {
341 display: flex;
342 align-items: center;
343 }
344
345 .sidebar-container .submenu-title-noDropdown>i,
346 .sidebar-container .el-submenu__title>i {
347 color: #6D7278 !important;
348 }
349
350 .el-submenu.is-active .el-submenu__title>i {
351 color: #FFFFFF !important;
352 }
353
354 .el-submenu__title span {
355 white-space: normal;
356 word-break: break-all;
357 line-height: 20px;
358 flex: 1;
359 padding-right: 20px;
360 }
361
362 .el-menu-item {
363 height: 42px;
364 display: flex;
365 align-items: center;
366 padding-right: 20px !important;
367 }
368
369 .el-menu-item span {
370 // white-space: nowrap !important;
371 word-break: break-all;
372 line-height: 20px;
373 flex: 1;
374 }
...\ No newline at end of file ...\ No newline at end of file
1 /* 1 /*
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-03-24 16:44:54 4 * @LastEditTime: 2023-05-11 17:23:08
5 */ 5 */
6 import Vue from 'vue' 6 export default function getTheme () {
7 export default function getTheme (theme = Vue.prototype.BASE_API.THEME) { 7 import("@/styles/jgPublic.scss")
8 const resultMap = {
9 'jg': function () {
10 return import("@/styles/jgPublic.scss");
11 },
12 'sb': function () {
13 return import("@/styles/sbPublic.scss");
14 },
15 'default': function () {
16 throw new Error(`Unsupported theme: ${theme}`);
17 },
18 };
19 const result = resultMap[theme]();
20 if (result instanceof Promise) {
21 return result;
22 } else {
23 return resultMap.default();
24 }
25 } 8 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <div class="bg">
3 <div class="title">
4 <img src="../../image/bdclogo.png" alt="">
5 <h2>{{ BASE_API.TITLE }}</h2>
6 </div>
7 <div class="login-inner-bg login">
8 <div class="user_style">
9 <h3>用户登录</h3>
10 <el-form :model="user" :rules="rules" ref="user" id="loginform" class="demo-ruleForm">
11 <el-form-item prop="account">
12 <el-input class="username" v-model="user.account" placeholder="请输入用户名"></el-input>
13 </el-form-item>
14 <el-form-item prop="password">
15 <el-input type="password" class="password" @keyup.enter.native="login('user')" v-model="user.password"
16 placeholder="请输入密码" show-password></el-input>
17 </el-form-item>
18 <!-- <el-form-item prop="yz">
19 <div class="flex-container">
20 <div class="flex-input">
21 <el-input class="yz" @keyup.native="login('user')" v-model="user.yz" placeholder="请输入验证码"></el-input>
22 </div>
23 <div class="flex-line"></div>
24 <div class="flex-img"><canvas id="s-canvas" ref="s-canvas"></canvas></div>
25 <div class="flex-renovate">
26 <font id="renovate" @click="verification">换一批</font>
27 </div>
28 </div>
29 </el-form-item> -->
30 <el-form-item class="login-btn">
31 <el-button type="primary" style="width: 100%" @click="login('user')">登录</el-button>
32 </el-form-item>
33 </el-form>
34 </div>
35 </div>
36 </div>
37 </template>
38
39 <script>
40 import { getMenuInfo } from "@/api/user";
41 import { loginIn } from "@/api/login.js";
42 export default {
43 name: "sbLogin",
44 data () {
45 return {
46 user: {
47 account: "",
48 password: "",
49 yz: "",
50 checkStatus: false,
51 },
52 productName: "",
53 rules: {
54 account: [{ required: true, message: "请填写帐号", trigger: "blur" }],
55 password: [{ required: true, message: "请填写密码", trigger: "blur" }],
56 },
57 };
58 },
59 methods: {
60 verification () {
61 let str = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ', code = '', i = 0;
62 for (; i++ < 4;) code += str[Math.floor(Math.random() * (str.length - 0) + 0)];
63 setTimeout(() => {
64 let canvas = document.getElementById("s-canvas"), ctx = canvas.getContext("2d");
65 canvas.width = 80;
66 canvas.height = 28;
67 ctx.fillStyle = '#ffffff';
68 ctx.fillRect(0, 0, 80, 28);
69 for (i = 0; i < code.length; i++) { this.drawText(ctx, code[i], i); }
70 }, 0);
71 },
72 drawText (ctx, txt, i) {
73 ctx.fillStyle = this.randomColor(50, 160);
74 ctx.font = "18px SimHei";
75 let x = (i + 1) * (80 / (4 + 1)), y = this.randomNum(18, 28 - 5);
76 ctx.translate(x, y);
77 ctx.fillText(txt, 0, 0);
78 ctx.rotate((-0 * Math.PI) / 180);
79 ctx.translate(-x, -y);
80 },
81 randomColor (min, max) {
82 let r = this.randomNum(min, max);
83 let g = this.randomNum(min, max);
84 let b = this.randomNum(min, max);
85 return "rgb(" + r + "," + g + "," + b + ")";
86 },
87 randomNum (min, max) {
88 return Math.floor(Math.random() * (max - min) + min);
89 },
90 //记住用户名
91 checkUserName: function (flag) {
92 this.user.checkStatus = flag;
93 if (this.user.checkStatus) {
94 localStorage.setItem("accountId", this.user.account);
95 let name = localStorage.getItem("accountId");
96 if (name === "") {
97 return;
98 } else {
99 this.user.account = name;
100 }
101 } else {
102 this.user.account = localStorage.getItem("accountId");
103 }
104 },
105 login (user) {
106 var self = this
107 this.$refs[user].validate(async (valid) => {
108 if (valid) {
109 let res = await loginIn(self.user.account, self.user.password)
110 if (res.status == 1) {
111 let code = this.BASE_API.CODE;
112 localStorage.setItem("token", `Bearer ${res.content}`);
113 const { result: getMenuData } = (await getMenuInfo(code)) || [];
114 let path1 = JSON.parse(getMenuData[0].metadata)?.path + '/' + JSON.parse(getMenuData[0].children[0].metadata)?.path
115 //登录成功后需判断有无重定向，没有重定向则跳转首页
116 const accessRoutes = await this.$store.dispatch(
117 "permission/generateRoutes",
118 getMenuData
119 );
120 this.$router.addRoutes([
121 ...accessRoutes,
122 { path: "*", redirect: "/404", hidden: true },
123 ]);
124 this.$router.replace(this.$route.query.redirect || path1);
125 } else {
126 this.$message.error(res.message);
127 }
128 }
129 })
130 }
131 }
132 }
133 </script>
134 <style scoped lang="scss">
135 .username,
136 .password,
137 .yz {
138 position: relative;
139
140 &:before {
141 content: "";
142 display: block;
143 width: 16px;
144 height: 16px;
145 position: absolute;
146 left: 10px;
147 top: 7px;
148 background-size: 100% 100%;
149 }
150
151 /deep/ .el-input__inner {
152 color: #000 !important;
153 text-indent: 24px;
154 }
155 }
156
157 .flex-container {
158 position: relative;
159 display: -webkit-flex;
160 display: flex;
161 }
162
163 .flex-input {
164 width: 100%;
165 }
166
167 .flex-line {
168 position: absolute;
169 width: 1px;
170 height: 64%;
171 margin: 5px;
172 right: 36%;
173 background-color: #CCCCCC;
174 }
175
176 .flex-img {
177 position: absolute;
178 margin: 2px;
179 right: 16%;
180 }
181
182 .flex-renovate {
183 position: absolute;
184 margin: 1px;
185 right: 3%;
186 }
187
188 #renovate {
189 color: #3F8FEA;
190 font-size: 16px;
191 font-weight: 700;
192 cursor: pointer;
193 }
194
195 .username::before {
196 background-image: url(../../image/userlogo.png);
197 }
198
199 .password::before {
200 background-image: url(../../image/passlogo.png);
201 }
202
203 .yz::before {
204 background-image: url(../../image/yzlogo.png);
205 }
206
207 .bg {
208 width: 100%;
209 height: 100%;
210 min-width: 1440px;
211 min-height: 560px;
212 background: url(../../image/loginBoxsb.png) no-repeat;
213 background-size: 100% 100%;
214 overflow: hidden;
215 position: relative;
216 }
217
218 .title {
219 width: 24%;
220 height: 6%;
221 top: 20%;
222 right: 38%;
223 position: absolute;
224
225 img {
226 width: 60px;
227 height: 60px;
228 top: 0%;
229 left: 2%;
230 position: absolute;
231 }
232
233 h2 {
234 top: 25%;
235 left: 22%;
236 position: absolute;
237 width: 383px;
238 height: 42px;
239 font-size: 28px;
240 font-weight: 600;
241 color: #ffffff;
242 text-shadow: 0px 4px 4px #002c95;
243 }
244 }
245
246 .login-inner-bg {
247 background: white;
248 width: 24.6%;
249 min-width: 360px;
250 top: 30%;
251 right: 38%;
252 position: absolute;
253 background-size: 100% 100%;
254 box-sizing: border-box;
255 padding: 56px;
256 }
257
258 .login {
259 .user_style {
260 h3 {
261 font-weight: normal;
262 text-align: center;
263 margin: -10px auto 28px;
264 font-weight: 400;
265 width: 125px;
266 height: 29px;
267 font-size: 20px;
268 font-family: Source Han Sans CN;
269 font-weight: 400;
270 color: #333333;
271 }
272 }
273
274 .btn {
275 width: 100%;
276 height: 6vh;
277 background-color: #00c2de;
278 border-radius: 5px;
279 font-size: 1.4vw;
280 color: #000;
281 }
282
283 .btn:hover {
284 cursor: pointer;
285 background-color: #2d8cf0;
286 }
287 }
288
289 .login #loginform {
290 .el-form-item {
291 margin-bottom: 24px !important;
292 }
293
294 .login-btn {
295 margin-top: 30px !important;
296 }
297
298 .el-button {
299 font-size: 18px;
300 border-radius: 0;
301 background: #4162d8 !important;
302 color: #ffffff !important;
303 cursor: pointer !important;
304 }
305
306 .el-input__inner {
307 width: 100% !important;
308 }
309
310 .el-checkbox__label {
311 color: #fff;
312 }
313 }
314
315 .inputUser .ivu-input {
316 padding: 6px 24px !important;
317 border: 1px solid #9f9f9f !important;
318 }
319 </style>