|
@@ -0,0 +1,178 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="sidebar">
|
|
|
|
+ <div style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
|
|
|
|
+ <span style="position: absolute;top:-3px;left: 70px;color: #fff;">目录</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="height: 40px"></div>
|
|
|
|
+ <el-menu
|
|
|
|
+ active-text-color="#ffd04b"
|
|
|
|
+ background-color="transparent"
|
|
|
|
+ class="sidebar-el-menu"
|
|
|
|
+ default-active="1"
|
|
|
|
+ text-color="#fff">
|
|
|
|
+ <!-- 一级菜单 -->
|
|
|
|
+ <template v-for="item in list">
|
|
|
|
+ <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
|
|
|
|
+ <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 10px;"
|
|
|
|
+ width="28px"/><span style="font-size:18px;font-weight:bold">{{
|
|
|
|
+ item.name
|
|
|
|
+ }}</span>
|
|
|
|
+ </template>
|
|
|
|
+ <!-- 二级菜单 -->
|
|
|
|
+ <template v-for="itemChild in item.children">
|
|
|
|
+ <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
|
|
|
|
+ :index="itemChild.path">
|
|
|
|
+ <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
|
|
|
|
+ style="margin-right: 10px;"/><span
|
|
|
|
+ style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
|
|
|
|
+ <!-- 三级菜单 -->
|
|
|
|
+ <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
|
|
|
|
+ :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
|
|
|
|
+ <img :src="require('../fdjh/img/last1.png')" style="margin-right: 10px;"/><span
|
|
|
|
+ slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
|
|
|
|
+ </el-submenu>
|
|
|
|
+
|
|
|
|
+ <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
|
|
|
|
+ :src="require('../fdjh/img/pc1.png')"
|
|
|
|
+ style="margin-right: 10px;"/><span slot="title">{{ itemChild.name }}</span>
|
|
|
|
+ </el-menu-item>
|
|
|
|
+ </template>
|
|
|
|
+ </el-submenu>
|
|
|
|
+ <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('../fdjh/img/plan.png')"
|
|
|
|
+ style="margin-right: 10px;"
|
|
|
|
+ width="28px"/><span
|
|
|
|
+ slot="title">{{ item.name }}</span></el-menu-item>
|
|
|
|
+ </template>
|
|
|
|
+ </el-menu>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ list: [
|
|
|
|
+ {
|
|
|
|
+ path: "/1",
|
|
|
|
+ name: "实时调度计划",
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ path: "/1/1",
|
|
|
|
+ name: "发电端计划监控",
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ path: "/#/table1",
|
|
|
|
+ name: "风电",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/fdjhgf",
|
|
|
|
+ name: "光伏电站",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/fdjhhd",
|
|
|
|
+ name: "火电厂",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/fdjhcn",
|
|
|
|
+ name: "储能",
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/1/2",
|
|
|
|
+ name: "约束条件监控",
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ path: "/#/llx",
|
|
|
|
+ name: "联络线",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/dm",
|
|
|
|
+ name: "断面",
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/1/3",
|
|
|
|
+ name: "数据采集监控监控",
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ path: "/#/hd",
|
|
|
|
+ name: "火电厂",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/fdgf",
|
|
|
|
+ name: "风电、光伏电站",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/ptfh",
|
|
|
|
+ name: "普通负荷",
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ path: "/#/gaoznfh",
|
|
|
|
+ name: "高载能负荷",
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ changePage(obj) {
|
|
|
|
+ var parentIframe = parent.document.getElementById('showcontent');
|
|
|
|
+ parentIframe.src = obj.path;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped>
|
|
|
|
+.sidebar {
|
|
|
|
+ display: block;
|
|
|
|
+ text-align: left;
|
|
|
|
+
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.sidebar::-webkit-scrollbar {
|
|
|
|
+ width: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.sidebar-el-menu:not(.el-menu--collapse) {
|
|
|
|
+//position: absolute; //top: 6%; margin: 0px 0 30px 30px; background-size: 100% 100%; height: 90%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+/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>
|
|
|
|
+
|
|
|
|
+
|