|
|
@@ -1,70 +1,72 @@
|
|
|
<template>
|
|
|
- <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
|
|
|
- <div class="homeBox"></div>
|
|
|
- <el-menu
|
|
|
- collapse-transition
|
|
|
- ref="menu"
|
|
|
- class="mt-3 el-menu-vertical-demo"
|
|
|
- @open="handleOpen"
|
|
|
- @close="handleClose"
|
|
|
- background-color="#eff1f3"
|
|
|
- text-color="#000"
|
|
|
- :active-text-color="activeTextColor"
|
|
|
- :router="true"
|
|
|
- :default-active="defaultActive"
|
|
|
- :collapse="isCollapse"
|
|
|
- :default-openeds="openMenus"
|
|
|
- >
|
|
|
- <template v-for="item in routerList">
|
|
|
- <el-submenu
|
|
|
- v-if="
|
|
|
- item.children && item.children.length && item.meta?.hidden === false
|
|
|
- "
|
|
|
- :index="item.path"
|
|
|
- >
|
|
|
- <template slot="title">
|
|
|
- <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
- <i v-else class="svnIcon">
|
|
|
- <svg-icon :icon-class="item.iconName" />
|
|
|
- </i>
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </template>
|
|
|
- <el-menu-item
|
|
|
- v-for="child in item.children"
|
|
|
- v-if="child.meta?.hidden === false"
|
|
|
- :key="child.id"
|
|
|
- :index="`${child.path}?id=${child.id}`"
|
|
|
- @click="handleChangeMenuUrl(child, `${child.path}?id=${child.id}`)"
|
|
|
- >
|
|
|
- <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
|
|
|
- <i v-else class="svnIcon">
|
|
|
- <svg-icon :icon-class="child.iconName" />
|
|
|
- </i>
|
|
|
- <span>{{ child.name }}</span>
|
|
|
- </el-menu-item>
|
|
|
- </el-submenu>
|
|
|
- <el-menu-item
|
|
|
- v-else-if="item.meta?.hidden === false"
|
|
|
- :key="item.id"
|
|
|
- :index="`${item.path}?id=${item.id}`"
|
|
|
- @click="handleChangeMenuUrl(item, `${item.path}?id=${item.id}`)"
|
|
|
- >
|
|
|
- <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
- <i v-else-if="item.iconName" class="svnIcon">
|
|
|
+ <!-- <el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox"> -->
|
|
|
+ <el-menu
|
|
|
+ collapse-transition
|
|
|
+ ref="menu"
|
|
|
+ mode="horizontal"
|
|
|
+ class="mt-3 el-menu-vertical-demo"
|
|
|
+ @open="handleOpen"
|
|
|
+ @close="handleClose"
|
|
|
+ :active-text-color="activeTextColor"
|
|
|
+ :router="true"
|
|
|
+ :default-active="defaultActive"
|
|
|
+ :default-openeds="openMenus"
|
|
|
+ >
|
|
|
+ <!-- background-color="#eff1f300" text-color="#fff" -->
|
|
|
+ <template v-for="(item, indexMenu) in routerList">
|
|
|
+ <!-- 判断是否是中间位置 -->
|
|
|
+ <el-menu-item v-if="indexMenu === Math.floor(routerList.length / 2) + 1">
|
|
|
+ <span class="headerText">风电机组健康度诊断平台</span>
|
|
|
+ </el-menu-item>
|
|
|
+ <el-submenu
|
|
|
+ v-if="
|
|
|
+ item.children && item.children.length && item.meta?.hidden === false
|
|
|
+ "
|
|
|
+ :index="item.path"
|
|
|
+ >
|
|
|
+ <template slot="title">
|
|
|
+ <!-- <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else class="svnIcon">
|
|
|
<svg-icon :icon-class="item.iconName" />
|
|
|
- </i>
|
|
|
- <i class="svnIcon" v-else-if="item.path === '/home/laserRangeFinder'">
|
|
|
- <svg-icon
|
|
|
- style="width: 22px; height: 22px"
|
|
|
- icon-class="laserRangeFinder"
|
|
|
- />
|
|
|
- </i>
|
|
|
+ </i> -->
|
|
|
<span>{{ item.name }}</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item
|
|
|
+ v-for="child in item.children"
|
|
|
+ v-if="child.meta?.hidden === false"
|
|
|
+ :key="child.id"
|
|
|
+ :index="`${child.path}?id=${child.id}`"
|
|
|
+ @click="handleChangeMenuUrl(child, `${child.path}?id=${child.id}`)"
|
|
|
+ >
|
|
|
+ <!-- <i v-if="isElPrefix(child.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else class="svnIcon">
|
|
|
+ <svg-icon :icon-class="child.iconName" />
|
|
|
+ </i> -->
|
|
|
+ <span>{{ child.name }}</span>
|
|
|
</el-menu-item>
|
|
|
- </template>
|
|
|
- </el-menu>
|
|
|
-
|
|
|
- <div class="foldBox flexCenter">
|
|
|
+ </el-submenu>
|
|
|
+ <el-menu-item
|
|
|
+ v-else-if="item.meta?.hidden === false"
|
|
|
+ :key="item.id"
|
|
|
+ :index="`${item.path}?id=${item.id}`"
|
|
|
+ @click="handleChangeMenuUrl(item, `${item.path}?id=${item.id}`)"
|
|
|
+ >
|
|
|
+ <!-- <i v-if="isElPrefix(item.iconName)" class="el-icon-menu"></i>
|
|
|
+ <i v-else-if="item.iconName" class="svnIcon">
|
|
|
+ <svg-icon :icon-class="item.iconName" />
|
|
|
+ </i>
|
|
|
+ <i class="svnIcon" v-else-if="item.path === '/home/laserRangeFinder'">
|
|
|
+ <svg-icon
|
|
|
+ style="width: 22px; height: 22px"
|
|
|
+ icon-class="laserRangeFinder"
|
|
|
+ />
|
|
|
+ </i> -->
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </template>
|
|
|
+ </el-menu>
|
|
|
+
|
|
|
+ <!-- <div class="foldBox flexCenter">
|
|
|
<span
|
|
|
v-show="isCollapse"
|
|
|
class="el-icon-s-unfold icon"
|
|
|
@@ -76,7 +78,7 @@
|
|
|
:value="isExpanded"
|
|
|
@change="toggleAllMenus"
|
|
|
>
|
|
|
- <!-- :inactive-text="isExpanded ? '收起全部菜单' : '展开全部菜单'" -->
|
|
|
+ :inactive-text="isExpanded ? '收起全部菜单' : '展开全部菜单'"
|
|
|
</el-switch>
|
|
|
<span
|
|
|
v-show="!isCollapse"
|
|
|
@@ -84,8 +86,8 @@
|
|
|
@click.stop="isCollapse = true"
|
|
|
>收起</span
|
|
|
>
|
|
|
- </div>
|
|
|
- </el-aside>
|
|
|
+ </div> -->
|
|
|
+ <!-- </el-aside> -->
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -256,130 +258,151 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
|
- width: 200px;
|
|
|
- min-height: 400px;
|
|
|
+.el-menu-vertical-demo {
|
|
|
+ // overflow-x: scroll;
|
|
|
+}
|
|
|
+::v-deep.el-menu {
|
|
|
+ background-color: #eff1f300 !important;
|
|
|
+}
|
|
|
+::v-deep.headerText {
|
|
|
+ pointer-events: none;
|
|
|
+ background-image: url("../../../assets/headerText.png") !important;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 85%;
|
|
|
+ padding: 0px 30px;
|
|
|
+ // width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep.mt-3 {
|
|
|
+ margin-top: 0px !important;
|
|
|
+ padding-left: 20px;
|
|
|
}
|
|
|
.stop-animation,
|
|
|
.active-animation {
|
|
|
font-size: 0px;
|
|
|
}
|
|
|
|
|
|
-.asideBox {
|
|
|
- height: 100vh;
|
|
|
- overflow-y: scroll;
|
|
|
- position: relative;
|
|
|
- padding-bottom: 40px;
|
|
|
- padding-top: 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
- flex-direction: column;
|
|
|
- border-right: 1px solid #d8d8d8;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .homeBox {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: flex-start;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .logoItem {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- cursor: pointer;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- span {
|
|
|
- line-height: 50px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
-
|
|
|
- .logoImg {
|
|
|
- img {
|
|
|
- height: 100%;
|
|
|
- width: inherit;
|
|
|
- }
|
|
|
-
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .search {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .el-icon-search {
|
|
|
- margin-top: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-input {
|
|
|
- width: inherit;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .frame {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- color: #666;
|
|
|
- width: 100%;
|
|
|
- margin-top: 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- .homeIndex {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 18px;
|
|
|
-
|
|
|
- .home_active {
|
|
|
- margin-right: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- p {
|
|
|
- color: #666;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- p {
|
|
|
- color: #19436d;
|
|
|
- }
|
|
|
-
|
|
|
- transition: width 0.5s ease, transform 0.5s ease;
|
|
|
- transform-origin: left;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- left: 50%;
|
|
|
- transform: scaleX(0);
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- left: 0;
|
|
|
- transform: scaleX(0);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-menu {
|
|
|
- margin-bottom: 10px;
|
|
|
- border: none;
|
|
|
- overflow-y: auto;
|
|
|
- width: 100% !important;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
+// .asideBox {
|
|
|
+// height: 100vh;
|
|
|
+// overflow-y: scroll;
|
|
|
+// position: relative;
|
|
|
+// padding-bottom: 40px;
|
|
|
+// padding-top: 16px;
|
|
|
+// box-sizing: border-box;
|
|
|
+// display: flex;
|
|
|
+// align-items: flex-start;
|
|
|
+// justify-content: flex-start;
|
|
|
+// flex-direction: column;
|
|
|
+// border-right: 1px solid #d8d8d8;
|
|
|
+// position: relative;
|
|
|
+
|
|
|
+// .homeBox {
|
|
|
+// width: 100%;
|
|
|
+// padding: 0 20px;
|
|
|
+// display: flex;
|
|
|
+// flex-direction: column;
|
|
|
+// align-items: flex-start;
|
|
|
+// justify-content: flex-start;
|
|
|
+// box-sizing: border-box;
|
|
|
+
|
|
|
+// .logoItem {
|
|
|
+// display: flex;
|
|
|
+// width: 100%;
|
|
|
+// cursor: pointer;
|
|
|
+// box-sizing: border-box;
|
|
|
+
|
|
|
+// span {
|
|
|
+// line-height: 50px;
|
|
|
+// margin: 0 auto;
|
|
|
+// }
|
|
|
+
|
|
|
+// .logoImg {
|
|
|
+// img {
|
|
|
+// height: 100%;
|
|
|
+// width: inherit;
|
|
|
+// }
|
|
|
+
|
|
|
+// width: 50px;
|
|
|
+// height: 50px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .search {
|
|
|
+// display: flex;
|
|
|
+// width: 100%;
|
|
|
+// align-items: center;
|
|
|
+// justify-content: center;
|
|
|
+
|
|
|
+// .el-icon-search {
|
|
|
+// margin-top: 28px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .el-input {
|
|
|
+// width: inherit;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .frame {
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+// align-items: center;
|
|
|
+// color: #666;
|
|
|
+// width: 100%;
|
|
|
+// margin-top: 20px;
|
|
|
+// margin-bottom: 10px;
|
|
|
+// cursor: pointer;
|
|
|
+
|
|
|
+// .homeIndex {
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: center;
|
|
|
+// font-size: 18px;
|
|
|
+
|
|
|
+// .home_active {
|
|
|
+// margin-right: 2px;
|
|
|
+// }
|
|
|
+
|
|
|
+// p {
|
|
|
+// color: #666;
|
|
|
+// font-size: 18px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// &:hover {
|
|
|
+// p {
|
|
|
+// color: #19436d;
|
|
|
+// }
|
|
|
+
|
|
|
+// transition: width 0.5s ease, transform 0.5s ease;
|
|
|
+// transform-origin: left;
|
|
|
+// }
|
|
|
+
|
|
|
+// .left {
|
|
|
+// left: 50%;
|
|
|
+// transform: scaleX(0);
|
|
|
+// }
|
|
|
+
|
|
|
+// .right {
|
|
|
+// left: 0;
|
|
|
+// transform: scaleX(0);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .el-menu {
|
|
|
+// margin-bottom: 10px;
|
|
|
+// border: none;
|
|
|
+// overflow-y: auto;
|
|
|
+// width: 100% !important;
|
|
|
+// height: 100%;
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
.flexCenter {
|
|
|
display: flex;
|
liujiejie
