发电计划菜单

src/router/index.js

@@ -3,179 +3,35 @@ import VueRouter from 'vue-router'
 import Login from '../views/Login/Login.vue'
 import Table1 from '../views/Articles/index.vue'
 import Fdjh from '../views/fdjh/fdjh.vue'
-import Gznfh1 from '@/views/ydjhdjk/gznfh/index.vue'
-import Gznfh from '@/views/ydjhdjk/gznfh/gznfh.vue'
-import Llx from '@/views/ystjjk/llx/llx.vue'
-import Llx1 from '@/views/ystjjk/llx/index.vue'
-import Dm from '@/views/ystjjk/dm/dm.vue'
-import Dm1 from '@/views/ystjjk/dm/index.vue'
-import Hd from '@/views/sjcjjk/hd/hd.vue'
-import Hd1 from '@/views/sjcjjk/hd/index.vue'
-import Fdgf from '@/views/sjcjjk/fdgf/fdgf.vue'
-import Fdgf1 from '@/views/sjcjjk/fdgf/index.vue'
-import Ptfh from '@/views/sjcjjk/ptfh/ptfh.vue'
-import Ptfh1 from '@/views/sjcjjk/ptfh/index.vue'
-import Gaoznfh from '@/views/sjcjjk/gznfh/gznfh.vue'
-import Gaoznfh1 from '@/views/sjcjjk/gznfh/index.vue'
-import Fdjhhd from '@/views/fdjh/hd/hd.vue'
-import Fdjhhd1 from '@/views/fdjh/hd/index.vue'
-import Fdjhgf from '@/views/fdjh/gf/gf.vue'
-import Fdjhgf1 from '@/views/fdjh/gf/index.vue'
-import Fdjhcn from '@/views/fdjh/cn/cn.vue'
-import Fdjhcn1 from '@/views/fdjh/cn/index.vue'
-import Jkcx from '@/views/xtrz/jkcx/jkcx.vue'
-import Jkcx1 from '@/views/xtrz/jkcx/index.vue'
-import Xtpz from '../views/xtpz/xtpz.vue'
-import Rqdd from '../views/rqdd/rqdd.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
-    {
-        path: '/xndc',
-        component: () => import('@/views/xndc/index'),
-        hidden: true
-    },
-    {
-        path: '/',
-        name: 'Login',
-        component: Login
-    },
-    {
-        path: '/table1',
-        name: 'Table1',
-        component: Table1
-    },
-    {
-        path: '/fdjh',
-        name: '发电计划',
-        component: Fdjh
-    },
-    {
-        path: '/fdjhhd1',
-        name: '火电厂',
-        component: Fdjhhd1
-    },
-    {
-        path: '/fdjhhd',
-        name: '火电厂',
-        component: Fdjhhd
-    },
-    {
-        path: '/fdjhgf1',
-        name: '光伏电站',
-        component: Fdjhgf1
-    },
-    {
-        path: '/fdjhgf',
-        name: '光伏电站',
-        component: Fdjhgf
-    },
-    {
-        path: '/fdjhcn1',
-        name: '储能',
-        component: Fdjhcn1
-    },
-    {
-        path: '/fdjhcn',
-        name: '储能',
-        component: Fdjhcn
-    },
-    {
-        path: '/gznfh1',
-        name: '高载能负荷',
-        component: Gznfh1
-    },
-    {
-        path: '/gznfh',
-        name: '高载能负荷',
-        component: Gznfh
-    },
-    {
-        path: '/llx1',
-        name: '联络线',
-        component: Llx1
-    },
-    {
-        path: '/llx',
-        name: '联络线',
-        component: Llx
-    },
-    {
-        path: '/dm1',
-        name: '断面',
-        component: Dm1
-    },
-    {
-        path: '/dm',
-        name: '断面',
-        component: Dm
-    },
-    {
-        path: '/hd1',
-        name: '火电厂',
-        component: Hd1
-    },
-    {
-        path: '/hd',
-        name: '火电厂',
-        component: Hd
-    },
-    {
-        path: '/fdgf1',
-        name: '风电、光伏电站',
-        component: Fdgf1
-    },
-    {
-        path: '/fdgf',
-        name: '风电、光伏电站',
-        component: Fdgf
-    },
-    {
-        path: '/ptfh1',
-        name: '普通负荷',
-        component: Ptfh1
-    },
-    {
-        path: '/ptfh',
-        name: '普通负荷',
-        component: Ptfh
-    },
-    {
-        path: '/gaoznfh1',
-        name: '高载能负荷',
-        component: Gaoznfh1
-    },
-    {
-        path: '/gaoznfh',
-        name: '高载能负荷',
-        component: Gaoznfh
-    },
-    {
-        path: '/jkcx1',
-        name: '接口、程序',
-        component: Jkcx1
-    },
-    {
-        path: '/jkcx',
-        name: '接口、程序',
-        component: Jkcx
-    },
+  {
+    path: '/dailyPlanning',
+    component: () => import('@/views/xndc/index'),
+    hidden: true
+  },
+  {
+    path: '/',
+    name: 'Login',
+    component: Login
+  },
+  {
+    path: '/table1',
+    name: 'Table1',
+    component: Table1
+  },
+  {
+    path: '/fdjh',
+    name: '发电计划',
+    component: Fdjh
+  }
 
-    {
-        path: '/xtpz',
-        name: '系统配置',
-        component: Xtpz
-    },
-    {
-        path: '/rqdd',
-        name: '日前调度',
-        component: Rqdd
-    }
 ]
 
 const router = new VueRouter({
-    routes
+  routes
 })
 
 export default router

src/views/fdjh/LeftNav.vue

@@ -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">-->
+<!--    &lt;!&ndash; 一级菜单 &ndash;&gt;-->
+<!--    <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>-->
+
+<!--        &lt;!&ndash; 二级菜单 &ndash;&gt;-->
+<!--        <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>-->
+
+<!--            &lt;!&ndash; 三级菜单 &ndash;&gt;-->
+<!--            <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">&nbsp;日前调度计划</span>
+      </template>
+      <el-submenu index="1-1">
+        <template slot="title">
+          <img :src="require('./img/pc1.png')" />
+          <span style="font-size:16px;font-weight:bold">&nbsp;发电端计划监控</span>
+        </template>
+        <el-menu-item index="1-1-1"><img :src="require('./img/last1.png')" />&nbsp;风电</el-menu-item>
+        <el-menu-item index="1-1-2"><img :src="require('./img/last1.png')" />&nbsp;光伏电站</el-menu-item>
+        <el-menu-item index="1-1-3"><img :src="require('./img/last1.png')" />&nbsp;火电站</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">&nbsp;用电端计划监控</span>
+        </template>
+        <el-menu-item index="1-2-1"><img :src="require('./img/last1.png')" />&nbsp;高载能计划负荷</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">&nbsp;约束条件监控</span>
+        </template>
+        <el-menu-item index="1-3-1"><img :src="require('./img/last1.png')" />&nbsp;联络线</el-menu-item>
+        <el-menu-item index="1-3-2"><img :src="require('./img/last1.png')" />&nbsp;断面</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">&nbsp;数据采集监控监控</span>
+        </template>
+        <el-menu-item index="1-4-1"><img :src="require('./img/last1.png')" />&nbsp;火电厂</el-menu-item>
+        <el-menu-item index="1-4-2"><img :src="require('./img/last1.png')" />&nbsp;风电、光伏电站</el-menu-item>
+        <el-menu-item index="1-4-3"><img :src="require('./img/last1.png')" />&nbsp;普通负荷</el-menu-item>
+        <el-menu-item index="1-4-4"><img :src="require('./img/last1.png')" />&nbsp;高载能负荷</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>
+
+

src/views/fdjh/fdjh.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="page">
-    <iframe class="image_2 pos_2">
-      <img src="./img/fdjh-left.png">
-    </iframe>
+    <div id="iframe0" class="image_2 pos_2" style="">
+      <iframe  style="width: 100%;height: 100%" src="/#/nav">
+      </iframe>
+    </div>
     <div id="iframe1" class="image_3 pos_3" style="">
     <iframe  style="width: 100%;height: 100%" src="/#/table1">
     </iframe>
@@ -34,6 +35,10 @@ export default {
 iframe{
   border: 0;
 }
+#iframe0{
+  background-image: url(./img/img.png);
+}
+
 #iframe1{
   background-image: url(./img/img.png);
 }