|
@@ -0,0 +1,204 @@
|
|
|
+<template>
|
|
|
+ <div class="sidebar">
|
|
|
+<!-- <el-menu-->
|
|
|
+<!-- default-active="1"-->
|
|
|
+<!-- background-color="#545c64"-->
|
|
|
+<!-- text-color="#fff"-->
|
|
|
+<!-- active-text-color="#ffd04b" class=".el-aside .el-menu">-->
|
|
|
+<!-- <!– 一级菜单 –>-->
|
|
|
+<!-- <template v-for="item in list">-->
|
|
|
+<!-- <el-submenu v-if="item.children && item.children.length" :index="item.path" :key="item.path">-->
|
|
|
+<!-- <template slot="title"><i :class="item.icon"></i><span>{{item.name}}</span></template>-->
|
|
|
+
|
|
|
+<!-- <!– 二级菜单 –>-->
|
|
|
+<!-- <template v-for="itemChild in item.children">-->
|
|
|
+<!-- <el-submenu v-if="itemChild.children && itemChild.children.length" :index="itemChild.path" :key="itemChild.path">-->
|
|
|
+<!-- <template slot="title"><i :class="itemChild.icon"></i><span>{{itemChild.name}}</span></template>-->
|
|
|
+
|
|
|
+<!-- <!– 三级菜单 –>-->
|
|
|
+<!-- <el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child .path" :key="itemChild_Child.path">-->
|
|
|
+<!-- <i :class="itemChild_Child.icon"></i><span slot="title">{{itemChild_Child.name}}</span></el-menu-item>-->
|
|
|
+<!-- </el-submenu>-->
|
|
|
+
|
|
|
+<!-- <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"><i :class="itemChild.icon"></i><span slot="title">{{itemChild.name}}</span></el-menu-item>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-submenu>-->
|
|
|
+
|
|
|
+<!-- <el-menu-item v-else :index="item.path" :key="item.path"><i :class="item.icon"></i><span slot="title">{{item.name}}</span></el-menu-item>-->
|
|
|
+<!-- </template>-->
|
|
|
+
|
|
|
+<!-- </el-menu>-->
|
|
|
+ <div class="title"
|
|
|
+ style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
|
|
|
+ <span style="position: absolute;top:-3px;left: 70px">目录</span>
|
|
|
+ </div>
|
|
|
+ <el-menu
|
|
|
+ class="sidebar-el-menu"
|
|
|
+ @open="handleOpen"
|
|
|
+ @close="handleClose"
|
|
|
+ background-color="transparent"
|
|
|
+ text-color="#fff"
|
|
|
+ active-text-color="#ffd04b">
|
|
|
+
|
|
|
+ <el-submenu index="1">
|
|
|
+ <template slot="title">
|
|
|
+ <img width="28px" :src="require('./img/plan.png')" />
|
|
|
+ <span style="font-size:18px;font-weight:bold"> 日前调度计划</span>
|
|
|
+ </template>
|
|
|
+ <el-submenu index="1-1">
|
|
|
+ <template slot="title">
|
|
|
+ <img :src="require('./img/pc1.png')" />
|
|
|
+ <span style="font-size:16px;font-weight:bold"> 发电端计划监控</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item index="1-1-1"><img :src="require('./img/last1.png')" /> 风电</el-menu-item>
|
|
|
+ <el-menu-item index="1-1-2"><img :src="require('./img/last1.png')" /> 光伏电站</el-menu-item>
|
|
|
+ <el-menu-item index="1-1-3"><img :src="require('./img/last1.png')" /> 火电站</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-submenu index="1-2">
|
|
|
+ <template slot="title">
|
|
|
+ <img :src="require('./img/pc1.png')" />
|
|
|
+ <span style="font-size:16px;font-weight:bold"> 用电端计划监控</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item index="1-2-1"><img :src="require('./img/last1.png')" /> 高载能计划负荷</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-submenu index="1-3">
|
|
|
+ <template slot="title">
|
|
|
+ <img :src="require('./img/pc1.png')" />
|
|
|
+ <span style="font-size:16px;font-weight:bold"> 约束条件监控</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item index="1-3-1"><img :src="require('./img/last1.png')" /> 联络线</el-menu-item>
|
|
|
+ <el-menu-item index="1-3-2"><img :src="require('./img/last1.png')" /> 断面</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-submenu index="1-4">
|
|
|
+ <template slot="title">
|
|
|
+ <img :src="require('./img/pc1.png')" />
|
|
|
+ <span style="font-size:16px;font-weight:bold"> 数据采集监控监控</span>
|
|
|
+ </template>
|
|
|
+ <el-menu-item index="1-4-1"><img :src="require('./img/last1.png')" /> 火电厂</el-menu-item>
|
|
|
+ <el-menu-item index="1-4-2"><img :src="require('./img/last1.png')" /> 风电、光伏电站</el-menu-item>
|
|
|
+ <el-menu-item index="1-4-3"><img :src="require('./img/last1.png')" /> 普通负荷</el-menu-item>
|
|
|
+ <el-menu-item index="1-4-4"><img :src="require('./img/last1.png')" /> 高载能负荷</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ path: "/1",
|
|
|
+ name: "日前调度计划",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ path: "/1/1",
|
|
|
+ name: "发电端计划监控",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ path: "/1/1/1",
|
|
|
+ name: "导航1-1-1",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: "/1/1/2",
|
|
|
+ name: "导航1-1-2",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: "/1/1/3",
|
|
|
+ name: "导航1-1-3",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: "/1/2",
|
|
|
+ name: "导航1-2",
|
|
|
+ icon:'el-icon-menu',
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ path: "/2",
|
|
|
+ name: "导航二",
|
|
|
+ icon:'el-icon-menu'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleOpen(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ },
|
|
|
+ handleClose(key, keyPath) {
|
|
|
+ console.log(key, keyPath);
|
|
|
+ }
|
|
|
+,
|
|
|
+ changeLogo(){
|
|
|
+ console.log(this)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.title {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-left: 60px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-el-menu:not(.el-menu--collapse) {
|
|
|
+
|
|
|
+ margin: 40px 0 30px 30px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/deep/ .el-submenu__title:hover{
|
|
|
+ background-color: rgb(103, 118, 49) !important;
|
|
|
+
|
|
|
+}
|
|
|
+/deep/ .sidebar-el-menu{
|
|
|
+ margin-left: 23px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar>ul {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.el-menu{
|
|
|
+ border:0!important;
|
|
|
+}
|
|
|
+.el-menu-item {
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight:bold;
|
|
|
+}
|
|
|
+
|
|
|
+.el-submenu .el-menu-item:hover{
|
|
|
+ background-color: rgb(103, 118, 49) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-sub-menu__title:hover{
|
|
|
+ background-color: rgb(103, 118, 49) !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|