|
@@ -2,42 +2,81 @@
|
|
|
<el-aside :width="!isCollapse ? '250px' : '100px'" class="asideBox">
|
|
|
<div class="homeBox">
|
|
|
<div class="logoItem" :class="{ 'flexCenter ': isCollapse }">
|
|
|
- <div class="logoImg" v-show="isCollapse" @click="
|
|
|
- handleChangeMenuUrl(
|
|
|
- { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
- `/home/cockpitManage?name=驾驶舱`
|
|
|
- )
|
|
|
- ">
|
|
|
- <SvgIcons name="dnao" class="dnao" width="40px" height="40px" color="#222"></SvgIcons>
|
|
|
+ <div
|
|
|
+ class="logoImg"
|
|
|
+ v-show="isCollapse"
|
|
|
+ @click="
|
|
|
+ handleChangeMenuUrl(
|
|
|
+ { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
+ `/home/cockpitManage?name=驾驶舱`
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcons
|
|
|
+ name="dnao"
|
|
|
+ class="dnao"
|
|
|
+ width="40px"
|
|
|
+ height="40px"
|
|
|
+ color="#222"
|
|
|
+ ></SvgIcons>
|
|
|
</div>
|
|
|
- <span v-if="!isCollapse" @click="
|
|
|
- handleChangeMenuUrl(
|
|
|
- { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
- `/home/cockpitManage?name=驾驶舱`
|
|
|
- )
|
|
|
- " :class="isCollapse ? 'stop-animation' : 'active-animation'">
|
|
|
+ <span
|
|
|
+ v-if="!isCollapse"
|
|
|
+ @click="
|
|
|
+ handleChangeMenuUrl(
|
|
|
+ { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
+ `/home/cockpitManage?name=驾驶舱`
|
|
|
+ )
|
|
|
+ "
|
|
|
+ :class="isCollapse ? 'stop-animation' : 'active-animation'"
|
|
|
+ >
|
|
|
风机运行管理平台
|
|
|
</span>
|
|
|
</div>
|
|
|
</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="#0754a1" :router="true"
|
|
|
- :default-active="defaultActive" :unique-opened="true" :collapse="isCollapse">
|
|
|
+ <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="#0754a1"
|
|
|
+ :router="true"
|
|
|
+ :default-active="defaultActive"
|
|
|
+ :unique-opened="true"
|
|
|
+ :collapse="isCollapse"
|
|
|
+ >
|
|
|
<div v-for="item in routerList" :key="item.id">
|
|
|
- <el-submenu :index="item.path" v-if="item.children && item.children.length > 0">
|
|
|
+ <el-submenu
|
|
|
+ :index="item.path"
|
|
|
+ v-if="item.children && item.children.length > 0"
|
|
|
+ >
|
|
|
<template slot="title">
|
|
|
<i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
|
|
|
- <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></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" :key="child.id"
|
|
|
- :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`">
|
|
|
+ <el-menu-item
|
|
|
+ v-for="child in item.children"
|
|
|
+ :key="child.id"
|
|
|
+ :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
|
|
|
+ >
|
|
|
<i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></i>
|
|
|
- <i v-else class="svnIcon"><svg-icon :icon-class="child.iconName" /></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 :key="item.id" :index="`/home/${item.path}?id=${item.id}&name=${item.name}`" v-else>
|
|
|
+ <el-menu-item
|
|
|
+ :key="item.id"
|
|
|
+ :index="`/home/${item.path}?id=${item.id}&name=${item.name}`"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
<i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
|
|
|
<i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
|
|
|
<span>{{ item.name }}</span>
|
|
@@ -45,10 +84,18 @@
|
|
|
</div>
|
|
|
</el-menu>
|
|
|
<div class="foldBox flexCenter">
|
|
|
- <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="debouncedToggleCollapse(false)">
|
|
|
+ <span
|
|
|
+ v-show="isCollapse"
|
|
|
+ class="el-icon-s-unfold icon"
|
|
|
+ @click="debouncedToggleCollapse(false)"
|
|
|
+ >
|
|
|
展开
|
|
|
</span>
|
|
|
- <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="debouncedToggleCollapse(true)">
|
|
|
+ <span
|
|
|
+ v-show="!isCollapse"
|
|
|
+ class="el-icon-s-fold icon"
|
|
|
+ @click="debouncedToggleCollapse(true)"
|
|
|
+ >
|
|
|
收起
|
|
|
</span>
|
|
|
</div>
|
|
@@ -279,8 +326,7 @@ export default {
|
|
|
color: #19436d;
|
|
|
}
|
|
|
|
|
|
- transition: width 0.5s ease,
|
|
|
- transform 0.5s ease;
|
|
|
+ transition: width 0.5s ease, transform 0.5s ease;
|
|
|
transform-origin: left;
|
|
|
}
|
|
|
|