|
|
@@ -2,38 +2,43 @@
|
|
|
<div v-if="isShowMenu == -1" class="bottom-side" :class="{ 'bottom-size-show': isShowMenu }">
|
|
|
<div class="menu-container">
|
|
|
<template v-for="(menu, index) in currentParentRoute.children" :key="index">
|
|
|
- <FourBorderBg class="four-border-bg" v-if="!menu.hideMenu">
|
|
|
- <div class="vent-flex-row" >
|
|
|
+ <FourBorderBg class="four-border-bg" v-if="!menu.hideMenu">
|
|
|
+ <div class="vent-flex-row">
|
|
|
<div class="parent-menu">
|
|
|
{{ menu.name }}
|
|
|
</div>
|
|
|
- <div class="vent-flex-row-wrap child-menu" >
|
|
|
+ <div class="vent-flex-row-wrap child-menu">
|
|
|
<template v-for="(childMenu, childIndex) in menu.children" :key="childIndex">
|
|
|
- <div v-if="!childMenu.hideMenu" class="child-menu-item" @click="handleMenuClick(childMenu)">
|
|
|
- {{ childMenu.name }}
|
|
|
- </div>
|
|
|
+ <template v-if="!childMenu.hideMenu">
|
|
|
+ <template v-if="childMenu.path == '/monitorChannel/monitor-window' || childMenu.path === '/monitorChannel/monitor-windrect'">
|
|
|
+ <div class="child-menu-item" @click="handleMenuClick(childMenu)">
|
|
|
+ {{ childMenu.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="child-menu-item-disabled" :style="{ backgroundColor: '#314671' }">
|
|
|
+ {{ childMenu.name }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</FourBorderBg>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<div class="vent-flex-row-between menu-button-group">
|
|
|
<div class="vent-flex-row program-group">
|
|
|
<template v-for="(programMenu, key) in menuModules" :key="key">
|
|
|
- <div
|
|
|
- v-if="!programMenu.title.startsWith('首页')"
|
|
|
- class="program-menu"
|
|
|
- :class="{ 'program-menu-active': currentParentRoute == programMenu }"
|
|
|
- @mouseenter="selectMenu(programMenu)"
|
|
|
- >{{ programMenu.title }}</div
|
|
|
- >
|
|
|
+ <div v-if="!programMenu.title.startsWith('首页')" class="program-menu"
|
|
|
+ :class="{ 'program-menu-active': currentParentRoute == programMenu }" @click="selectMenu(programMenu)">{{
|
|
|
+ programMenu.title }}</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="setting-group">
|
|
|
- <SvgIcon class="icon-style" size="18" name="home" @click="go(PageEnum.BASE_HOME)" />
|
|
|
+ <SvgIcon class="icon-style" size="18" name="home" @click="geHome" />
|
|
|
<SvgIcon class="icon-style" size="18" name="fixed" />
|
|
|
- <SvgIcon class="icon-style" size="18" name="enter" />
|
|
|
+ <SvgIcon class="icon-style" size="18" name="enter" @click="closeMenu" />
|
|
|
<!-- <SvgIcon class="icon-style" size="18" name="setting" />
|
|
|
<SvgIcon class="icon-style" size="18" name="hidden" /> -->
|
|
|
</div>
|
|
|
@@ -47,224 +52,260 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, onMounted, ref, unref } from 'vue';
|
|
|
- import type { Menu } from '/@/router/types';
|
|
|
- import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import { getMenus } from '/@/router/menus';
|
|
|
- import { useGo } from '/@/hooks/web/usePage';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
- import { PageEnum } from '/@/enums/pageEnum';
|
|
|
-
|
|
|
- export default defineComponent({
|
|
|
- name: 'BottomSider',
|
|
|
- components: { FourBorderBg, SvgIcon },
|
|
|
- setup() {
|
|
|
- const isShowMenu = ref(0);
|
|
|
- let menuModules = ref<Menu[]>([]);
|
|
|
- const router = useRouter();
|
|
|
-
|
|
|
- const currentParentRoute = ref<Menu>();
|
|
|
- const { currentRoute } = router;
|
|
|
- const route = unref(currentRoute);
|
|
|
- const go = useGo();
|
|
|
- function selectMenu(programMenu) {
|
|
|
- currentParentRoute.value = programMenu;
|
|
|
- }
|
|
|
+import { defineComponent, onMounted, ref, unref } from 'vue';
|
|
|
+import type { Menu } from '/@/router/types';
|
|
|
+import FourBorderBg from '/@/components/vent/fourBorderBg.vue';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import { getMenus } from '/@/router/menus';
|
|
|
+import { useGo } from '/@/hooks/web/usePage';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { PageEnum } from '/@/enums/pageEnum';
|
|
|
+import path from 'path';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'BottomSider',
|
|
|
+ components: { FourBorderBg, SvgIcon },
|
|
|
+ setup() {
|
|
|
+ const isShowMenu = ref(0);
|
|
|
+ let menuModules = ref<Menu[]>([]);
|
|
|
+ const router = useRouter();
|
|
|
+
|
|
|
+ const currentParentRoute = ref<Menu>();
|
|
|
+ const { currentRoute } = router;
|
|
|
+ const route = unref(currentRoute);
|
|
|
+ const go = useGo();
|
|
|
+ function selectMenu(programMenu) {
|
|
|
+ currentParentRoute.value = programMenu;
|
|
|
+ }
|
|
|
|
|
|
- function handleMenuClick(path: Menu) {
|
|
|
- if (route.path.startsWith('/micro-')) {
|
|
|
- debugger
|
|
|
- if (route.path.startsWith('/'+ PageEnum.BASE_HOME)){
|
|
|
- const { href } = router.resolve(path.path)
|
|
|
- window.open(href, '_blank')
|
|
|
- }else {
|
|
|
- history.pushState({}, '', path.path);
|
|
|
- }
|
|
|
+ function handleMenuClick(path: Menu) {
|
|
|
+ if (route.path.startsWith('/micro-')) {
|
|
|
+ if (route.path.startsWith(PageEnum.BASE_HOME)) {
|
|
|
+ const { href } = router.resolve(path.path)
|
|
|
+ window.open(href, '_blank')
|
|
|
+ } else {
|
|
|
+ history.pushState({}, '', path.path);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (route.path.startsWith('/subSysmodal/')) {
|
|
|
+ router.replace('/micro-vent-3dModal' + path.path)
|
|
|
} else {
|
|
|
- // micro-vent-3dModal
|
|
|
- if(route.path.startsWith('/subSysmodal/')) {
|
|
|
- router.replace('/micro-vent-3dModal' + path.path)
|
|
|
- }else{
|
|
|
- go(path.path);
|
|
|
- }
|
|
|
-
|
|
|
+ go(path.path);
|
|
|
}
|
|
|
- isShowMenu.value = 0;
|
|
|
+
|
|
|
}
|
|
|
+ isShowMenu.value = 0;
|
|
|
+ }
|
|
|
+ function geHome() {
|
|
|
+ // history.pushState({}, '', `/${PageEnum.BASE_HOME}`);
|
|
|
+ go(`/${PageEnum.BASE_HOME}`)
|
|
|
+ isShowMenu.value = 0;
|
|
|
+ }
|
|
|
|
|
|
- function closeMenu() {
|
|
|
- isShowMenu.value = 0;
|
|
|
- window.removeEventListener('click', closeMenu);
|
|
|
- };
|
|
|
+ function closeMenu() {
|
|
|
+ isShowMenu.value = 0;
|
|
|
+ // window.removeEventListener('click', closeMenu);
|
|
|
+ };
|
|
|
|
|
|
- function openMenu() {
|
|
|
- isShowMenu.value = -1;
|
|
|
- window.addEventListener('click', closeMenu, true);
|
|
|
- }
|
|
|
+ function openMenu() {
|
|
|
+ isShowMenu.value = -1;
|
|
|
+ // window.addEventListener('click', closeMenu, true);
|
|
|
+ }
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- menuModules.value = await getMenus();
|
|
|
- currentParentRoute.value = menuModules.value[1];
|
|
|
- });
|
|
|
- return {
|
|
|
- menuModules,
|
|
|
- isShowMenu,
|
|
|
- handleMenuClick,
|
|
|
- openMenu,
|
|
|
- selectMenu,
|
|
|
- go,
|
|
|
- PageEnum,
|
|
|
- currentParentRoute,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ onMounted(async () => {
|
|
|
+ menuModules.value = await getMenus();
|
|
|
+ currentParentRoute.value = menuModules.value[1];
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ menuModules,
|
|
|
+ isShowMenu,
|
|
|
+ handleMenuClick,
|
|
|
+ openMenu,
|
|
|
+ closeMenu,
|
|
|
+ selectMenu,
|
|
|
+ go,
|
|
|
+ geHome,
|
|
|
+ currentParentRoute,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@keyframes menuShow {
|
|
|
- 0% {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- width: 480px;
|
|
|
- height: 100vh;
|
|
|
- }
|
|
|
+ 0% {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
}
|
|
|
- .bottom-side {
|
|
|
+
|
|
|
+ 100% {
|
|
|
width: 480px;
|
|
|
height: 100vh;
|
|
|
- position: fixed;
|
|
|
- bottom: 2px;
|
|
|
- left: 0px;
|
|
|
- z-index: 9999999;
|
|
|
- color: #fff;
|
|
|
- .menu-container {
|
|
|
- width: 480px;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- // border: 1px solid #0099e6;
|
|
|
- // background-color: #06115a;
|
|
|
- border: 1px solid #0099e6;
|
|
|
- background-color: #0c1e2b;
|
|
|
- z-index: 999;
|
|
|
- // backdrop-filter: blur(8px);
|
|
|
- .four-border-bg {
|
|
|
- margin: 5px;
|
|
|
- background-color: #ffffff00;
|
|
|
- .main-container {
|
|
|
- background-color: #ffffff00 !important;
|
|
|
- box-shadow: 0 0 3px #ffffff33 inset;
|
|
|
- backdrop-filter: none !important;
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .parent-menu {
|
|
|
- width: 110px;
|
|
|
- }
|
|
|
- .child-menu {
|
|
|
- width: 330px;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- .child-menu-item {
|
|
|
- width: 100px;
|
|
|
- padding: 2px 0;
|
|
|
- // background-color: #086193;
|
|
|
- background: linear-gradient(#0d435d, #0e729d);
|
|
|
- border-radius: 2px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 5px;
|
|
|
- cursor: pointer;
|
|
|
- box-shadow: 0 0 3px #ffffff22 inset;
|
|
|
- &:hover {
|
|
|
- background: linear-gradient(#1d89bf, #17aeee);
|
|
|
- }
|
|
|
- }
|
|
|
+.bottom-side {
|
|
|
+ width: 480px;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 2px;
|
|
|
+ left: 0px;
|
|
|
+ z-index: 9999999;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ .menu-container {
|
|
|
+ width: 480px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ // border: 1px solid #0099e6;
|
|
|
+ // background-color: #06115a;
|
|
|
+ border: 1px solid #0099e6;
|
|
|
+ background-color: #142253;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ // backdrop-filter: blur(8px);
|
|
|
+ .four-border-bg {
|
|
|
+ margin: 5px;
|
|
|
+ background-color: #ffffff00;
|
|
|
+
|
|
|
+ .main-container {
|
|
|
+ background-color: #ffffff00 !important;
|
|
|
+ // box-shadow: 0 0 3px #ffffff33 inset;
|
|
|
+ backdrop-filter: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .parent-menu {
|
|
|
+ width: 110px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .child-menu {
|
|
|
+ width: 330px;
|
|
|
+ font-size: 13px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .menu-button-group {
|
|
|
- margin: 5px 0;
|
|
|
- .program-menu {
|
|
|
- // width: 90px;
|
|
|
- padding: 1px 15px;
|
|
|
- background:linear-gradient(#217aa5, #0f4f75);
|
|
|
- margin-left: 5px;
|
|
|
- text-align: center;
|
|
|
+ .child-menu-item {
|
|
|
+ width: 100px;
|
|
|
+ padding: 2px 0;
|
|
|
+ // background-color: #086193;
|
|
|
+ background: linear-gradient(#0d435d, #0e729d);
|
|
|
border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 5px;
|
|
|
cursor: pointer;
|
|
|
+ box-shadow: 0 0 3px #ffffff22 inset;
|
|
|
+
|
|
|
&:hover {
|
|
|
- background: linear-gradient(#42b7ff, #1ca0d4);
|
|
|
+ background: linear-gradient(#1d89bf, #17aeee);
|
|
|
}
|
|
|
}
|
|
|
- .program-menu-active {
|
|
|
- background: linear-gradient(#42adff, #1a8cbb);
|
|
|
+ }
|
|
|
+ .child-menu-item-disabled{
|
|
|
+ width: 100px;
|
|
|
+ padding: 2px 0;
|
|
|
+ border-radius: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0 0 3px #ffffff22 inset;
|
|
|
+ background: linear-gradient(#7b7b7b, #6b6b6b);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-button-group {
|
|
|
+ margin: 5px 0;
|
|
|
+
|
|
|
+ .program-menu {
|
|
|
+ // width: 90px;
|
|
|
+ padding: 1px 15px;
|
|
|
+ background: linear-gradient(#217aa5, #0f4f75);
|
|
|
+ margin-left: 5px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(#42b7ff, #1ca0d4);
|
|
|
}
|
|
|
- .icon-style {
|
|
|
- margin-right: 10px;
|
|
|
- &:last-child {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .program-menu-active {
|
|
|
+ background: linear-gradient(#42adff, #1a8cbb);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-style {
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bottom-size-show {
|
|
|
- animation: menuShow 0.4s;
|
|
|
- animation-iteration-count: 1;
|
|
|
- animation-fill-mode: forwards;
|
|
|
- animation-timing-function: ease-in;
|
|
|
- /* Safari and Chrome */
|
|
|
- -webkit-animation: menuShow 0.4s;
|
|
|
- -webkit-animation-iteration-count: 1;
|
|
|
- -webkit-animation-fill-mode: forwards;
|
|
|
- -webkit-animation-timing-function: ease-in;
|
|
|
- }
|
|
|
- .menu-show-icon {
|
|
|
- position: fixed;
|
|
|
- bottom: 5px;
|
|
|
- left: 5px;
|
|
|
- z-index: 1000000;
|
|
|
- .icon {
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-size-show {
|
|
|
+ animation: menuShow 0.4s;
|
|
|
+ animation-iteration-count: 1;
|
|
|
+ animation-fill-mode: forwards;
|
|
|
+ animation-timing-function: ease-in;
|
|
|
+ /* Safari and Chrome */
|
|
|
+ -webkit-animation: menuShow 0.4s;
|
|
|
+ -webkit-animation-iteration-count: 1;
|
|
|
+ -webkit-animation-fill-mode: forwards;
|
|
|
+ -webkit-animation-timing-function: ease-in;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-show-icon {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 5px;
|
|
|
+ left: 5px;
|
|
|
+ z-index: 1000000;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
|
|
|
+ background-position: center;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
- position: relative;
|
|
|
- background-image: url('/@/assets/images/vent/bottom-icon/menu-icon-outer.png');
|
|
|
+ position: absolute;
|
|
|
+ background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
|
|
|
background-position: center;
|
|
|
+ }
|
|
|
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- position: absolute;
|
|
|
- background: url('/@/assets/images/vent/bottom-icon/menu-icon-inner.png') no-repeat;
|
|
|
- background-position: center;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: absolute;
|
|
|
+ background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ animation-timing-function: ease-in;
|
|
|
+ animation: fadenum 8s infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes fadenum {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
}
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- position: absolute;
|
|
|
- background: url('/@/assets/images/vent/bottom-icon/menu-icon-center.png') no-repeat;
|
|
|
- background-position: center;
|
|
|
- animation-timing-function: ease-in;
|
|
|
- animation: fadenum 8s infinite;
|
|
|
+
|
|
|
+ 10% {
|
|
|
+ transform: rotate(360deg);
|
|
|
}
|
|
|
|
|
|
- @keyframes fadenum {
|
|
|
- 0% {
|
|
|
- transform: rotate(0deg);
|
|
|
- }
|
|
|
- 10% {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: rotate(360deg);
|
|
|
- }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
hongrunxia