|
@@ -2,61 +2,125 @@
|
|
|
<el-aside :width="!isCollapse ? '300px' : '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=驾驶舱`
|
|
|
- )
|
|
|
- ">
|
|
|
- <SvgIcon name="dnao" class="dnao" width="40px" height="40px" color="#222"></SvgIcon>
|
|
|
+ <div
|
|
|
+ class="logoImg"
|
|
|
+ v-show="isCollapse"
|
|
|
+ @click="
|
|
|
+ handleChangeMenuUrl(
|
|
|
+ { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
+ `/home/cockpitManage?name=驾驶舱`
|
|
|
+ )
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ name="dnao"
|
|
|
+ class="dnao"
|
|
|
+ width="40px"
|
|
|
+ height="40px"
|
|
|
+ color="#222"
|
|
|
+ ></SvgIcon>
|
|
|
</div>
|
|
|
- <span v-if="!isCollapse" @click="
|
|
|
- handleChangeMenuUrl(
|
|
|
- { name: '驾驶舱', id: 1, path: 'cockpitManage', iconName: 'gps' },
|
|
|
- `/home/cockpitManage?name=驾驶舱`
|
|
|
- )
|
|
|
- " :class="isCollapse ? 'stop-animation' : 'active-animation'">风机运行管理平台</span>
|
|
|
+ <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 ref="menu" class="mt-3 el-menu-vertical-demo" @open="handleOpen" @select="handleOpen" @close="handleClose"
|
|
|
- background-color="#eff1f3" text-color="#000" active-text-color="#0754a1" :router="false"
|
|
|
- :default-active="defaultActive" :unique-opened="true" :collapse="isCollapse">
|
|
|
- <el-submenu v-for="(item, index) in orgList" :key="index" :index="item.id">
|
|
|
+ <el-menu
|
|
|
+ ref="menu"
|
|
|
+ class="mt-3 el-menu-vertical-demo"
|
|
|
+ @open="handleOpen"
|
|
|
+ @select="handleOpen"
|
|
|
+ @close="handleClose"
|
|
|
+ background-color="#eff1f3"
|
|
|
+ text-color="#000"
|
|
|
+ active-text-color="#0754a1"
|
|
|
+ :router="false"
|
|
|
+ :default-active="defaultActive"
|
|
|
+ :unique-opened="true"
|
|
|
+ :collapse="isCollapse"
|
|
|
+ >
|
|
|
+ <el-submenu
|
|
|
+ v-for="(item, index) in orgList"
|
|
|
+ :key="index"
|
|
|
+ :index="item.id"
|
|
|
+ >
|
|
|
<template slot="title">
|
|
|
<div class="flex items-center justify-start">
|
|
|
- <i class="flex items-center justify-center mr-2" style="margin-left: 3px">
|
|
|
- <SvgIcon :name="item.iconName" class="dnao" width="20px" height="22px" color="#222"></SvgIcon>
|
|
|
+ <i
|
|
|
+ class="flex items-center justify-center mr-2"
|
|
|
+ style="margin-left: 3px"
|
|
|
+ >
|
|
|
+ <SvgIcon
|
|
|
+ :name="item.iconName"
|
|
|
+ class="dnao"
|
|
|
+ width="20px"
|
|
|
+ height="22px"
|
|
|
+ color="#222"
|
|
|
+ ></SvgIcon>
|
|
|
</i>
|
|
|
- <span slot="title" style="display: inline-block" :class="{
|
|
|
- 'active-menu':
|
|
|
- defaultActive === `/windField?id=${item.id}&name=${item.name}`
|
|
|
- }">{{ item.name }}</span>
|
|
|
+ <span
|
|
|
+ slot="title"
|
|
|
+ style="display: inline-block"
|
|
|
+ :class="{
|
|
|
+ 'active-menu':
|
|
|
+ defaultActive ===
|
|
|
+ `/windField?id=${item.id}&name=${item.name}`,
|
|
|
+ }"
|
|
|
+ >{{ item.name }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</template>
|
|
|
- <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex"
|
|
|
- :index="`/home/${child.path}?id=${child.id}&name=${child.name}`">
|
|
|
+ <el-menu-item
|
|
|
+ v-for="(child, childIndex) in item.children"
|
|
|
+ :key="childIndex"
|
|
|
+ :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
|
|
|
+ >
|
|
|
<template slot="title">
|
|
|
- <span slot="title" style="padding-left: 22px; width: 100%; display: inline-block" :class="{
|
|
|
- 'active-menu':
|
|
|
- defaultActive === `/dynamo?id=${item.id}&name=${item.name}`
|
|
|
- }" @click="
|
|
|
+ <span
|
|
|
+ slot="title"
|
|
|
+ style="padding-left: 22px; width: 100%; display: inline-block"
|
|
|
+ :class="{
|
|
|
+ 'active-menu':
|
|
|
+ defaultActive === `/dynamo?id=${item.id}&name=${item.name}`,
|
|
|
+ }"
|
|
|
+ @click="
|
|
|
handleChangeMenuUrl(
|
|
|
item,
|
|
|
- `/home/${child.path}?id=${item.id}&name=${item.name}`
|
|
|
+ `/home/${item.path}/${child.path}?id=${item.id}&name=${item.name}`
|
|
|
)
|
|
|
- ">{{ child.name }}</span>
|
|
|
+ "
|
|
|
+ >{{ child.name }}</span
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-menu-item>
|
|
|
</el-submenu>
|
|
|
</el-menu>
|
|
|
<div class="foldBox flexCenter">
|
|
|
- <span v-show="isCollapse" class="el-icon-s-unfold icon" @click="isCollapse = false">展开</span>
|
|
|
- <span v-show="!isCollapse" class="el-icon-s-fold icon" @click="isCollapse = true">收起</span>
|
|
|
+ <span
|
|
|
+ v-show="isCollapse"
|
|
|
+ class="el-icon-s-unfold icon"
|
|
|
+ @click="isCollapse = false"
|
|
|
+ >展开</span
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-show="!isCollapse"
|
|
|
+ class="el-icon-s-fold icon"
|
|
|
+ @click="isCollapse = true"
|
|
|
+ >收起</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { orgList } from './mockData'
|
|
|
+import { orgList } from "./mockData";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
@@ -66,17 +130,17 @@ export default {
|
|
|
// 三级菜单数组
|
|
|
orgList: orgList,
|
|
|
// 搜索值
|
|
|
- searchInputValue: '',
|
|
|
- defaultActive: '',
|
|
|
+ searchInputValue: "",
|
|
|
+ defaultActive: "",
|
|
|
activeIndex: false,
|
|
|
- keyObject: {}
|
|
|
- }
|
|
|
+ keyObject: {},
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
currentMenuIndex() {
|
|
|
- return this.$store.state.breadStore?.currentUrl?.routeUrl
|
|
|
- }
|
|
|
+ return this.$store.state.breadStore?.currentUrl?.routeUrl;
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
watch: {
|
|
@@ -84,76 +148,76 @@ export default {
|
|
|
deep: true,
|
|
|
handler(newVale, oldVal) {
|
|
|
if (newVale) {
|
|
|
- this.$refs.menu.close(newVale)
|
|
|
+ this.$refs.menu.close(newVale);
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
keyObject: {
|
|
|
deep: true,
|
|
|
handler(newVale) {
|
|
|
if (newVale && newVale.key === this.defaultActive) {
|
|
|
- this.getBreadcrumbList(newVale.keyPath)
|
|
|
+ this.getBreadcrumbList(newVale.keyPath);
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
- created() { },
|
|
|
+ created() {},
|
|
|
methods: {
|
|
|
getBreadcrumbList(keyPath) {
|
|
|
- const urls = keyPath
|
|
|
+ const urls = keyPath;
|
|
|
const result = urls.map((url, index) => {
|
|
|
- const params = new URLSearchParams(url.split('?')[1]) // 解析 URL 参数
|
|
|
- const id = params.get('id')
|
|
|
- const name = params.get('name')
|
|
|
- const routeUrl = url
|
|
|
+ const params = new URLSearchParams(url.split("?")[1]); // 解析 URL 参数
|
|
|
+ const id = params.get("id");
|
|
|
+ const name = params.get("name");
|
|
|
+ const routeUrl = url;
|
|
|
// 如果是最后一个路由,则添加额外属性
|
|
|
if (index === urls.length - 1) {
|
|
|
- return { id, name, routeUrl, currentPage: true }
|
|
|
+ return { id, name, routeUrl, currentPage: true };
|
|
|
}
|
|
|
- return { id, name, routeUrl }
|
|
|
- })
|
|
|
+ return { id, name, routeUrl };
|
|
|
+ });
|
|
|
// console.log(result)
|
|
|
- this.$store.commit('breadStore/ADD_BREAD', result)
|
|
|
- return result
|
|
|
+ this.$store.commit("breadStore/ADD_BREAD", result);
|
|
|
+ return result;
|
|
|
},
|
|
|
handleOpen(key, keyPath) {
|
|
|
// console.log(key, keyPath)
|
|
|
- this.activeIndex = false
|
|
|
+ this.activeIndex = false;
|
|
|
this.keyObject = {
|
|
|
key,
|
|
|
- keyPath
|
|
|
- }
|
|
|
+ keyPath,
|
|
|
+ };
|
|
|
},
|
|
|
handleClose(key, keyPath) {
|
|
|
// console.log(key, keyPath)
|
|
|
- this.activeIndex = false
|
|
|
+ this.activeIndex = false;
|
|
|
this.keyObject = {
|
|
|
key,
|
|
|
- keyPath
|
|
|
- }
|
|
|
+ keyPath,
|
|
|
+ };
|
|
|
},
|
|
|
|
|
|
shrinkTree() {
|
|
|
- this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`)
|
|
|
+ this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
|
|
|
},
|
|
|
handleChangeRouter() {
|
|
|
- this.activeIndex = true
|
|
|
- this.defaultActive = ''
|
|
|
- this.$store.commit('breadStore/ADD_BREAD', [])
|
|
|
- this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`)
|
|
|
- this.$router.push('/')
|
|
|
+ this.activeIndex = true;
|
|
|
+ this.defaultActive = "";
|
|
|
+ this.$store.commit("breadStore/ADD_BREAD", []);
|
|
|
+ this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
|
|
|
+ this.$router.push("/");
|
|
|
},
|
|
|
handleChangeMenuUrl(item, key) {
|
|
|
- this.defaultActive = key
|
|
|
+ this.defaultActive = key;
|
|
|
if (item) {
|
|
|
- item.activeIndex = true
|
|
|
+ item.activeIndex = true;
|
|
|
}
|
|
|
this.$router.push({
|
|
|
- path: key
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ path: key,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
@@ -272,8 +336,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
// background-color: rgb(64, 158, 255, 0.6);
|
|
|
- transition: width 0.5s ease,
|
|
|
- transform 0.5s ease;
|
|
|
+ transition: width 0.5s ease, transform 0.5s ease;
|
|
|
/* 过渡效果 */
|
|
|
transform-origin: left;
|
|
|
/* 设置变换的原点在左侧 */
|