菜单修改

src/views/fdjh/LeftNav.vue

@@ -1,86 +1,85 @@
 <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"
+      default-active="1"
       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>
+      active-text-color="#ffd04b"
+      class="sidebar-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"><img width="28px" :src="require('./img/plan.png')" /><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"><img :src="require('./img/pc1.png')" /><span>{{itemChild.name}}</span></template>
+            <!-- 三级菜单 -->
+            <el-menu-item v-for="itemChild_Child in itemChild.children" :index="itemChild_Child.path" :key="itemChild_Child.path" @click="changePage(itemChild_Child)">
+              <img :src="require('./img/last1.png')" /><span slot="title">{{itemChild_Child.name}}</span></el-menu-item>
+          </el-submenu>
+
+          <el-menu-item v-else :index="itemChild.path" :key="itemChild.path"><img :src="require('./img/pc1.png')" /><span slot="title">{{itemChild.name}}</span></el-menu-item>
         </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-item v-else :index="item.path" :key="item.path"><img width="28px" :src="require('./img/plan.png')" /><span slot="title">{{item.name}}</span></el-menu-item>
+    </template>
   </el-menu>
+
+<!--  <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" @click="changeLogo"><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>
 
@@ -92,55 +91,86 @@ export default {
         {
           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: "/#/table1",
+                  name: "风电",
                 },
                 {
                   path: "/1/1/2",
-                  name: "导航1-1-2",
-                  icon:'el-icon-menu',
+                  name: "光伏电站",
                 },
                 {
                   path: "/1/1/3",
-                  name: "导航1-1-3",
-                  icon:'el-icon-menu',
+                  name: "火电站",
                 }
               ]
             },
             {
               path: "/1/2",
-              name: "导航1-2",
-              icon:'el-icon-menu',
+              name: "用电端计划监控",
+              children: [
+                {
+                  path: "/1/2/1",
+                  name: "高载能计划负荷",
+                }
+              ]
+            },
+            {
+              path: "/1/3",
+              name: "约束条件监控",
+              children: [
+                {
+                  path: "/1/3/1",
+                  name: "联络线",
+                },
+                {
+                  path: "/1/3/2",
+                  name: "断面",
+                }
+              ]
+            },
+            {
+              path: "/1/4",
+              name: "数据采集监控监控",
+              children: [
+                {
+                  path: "/1/4/1",
+                  name: "火电厂",
+                },
+                {
+                  path: "/1/4/2",
+                  name: "风电、光伏电站",
+                },
+                {
+                  path: "/1/4/3",
+                  name: "普通负荷",
+                },
+                {
+                  path: "/1/4/4",
+                  name: "高载能负荷",
+                }
+              ]
             }
           ]
-        },
-        {
-          path: "/2",
-          name: "导航二",
-          icon:'el-icon-menu'
         }
       ]
     }
   },
   methods: {
     handleOpen(key, keyPath) {
-      console.log(key, keyPath);
+      // console.log(key, keyPath);
     },
     handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    }
-,
-    changeLogo(){
-        console.log(this)
+      // console.log(key, keyPath);
+    },
+    changePage(obj){
+      var parentIframe = parent.document.getElementById('showcontent');
+       parentIframe.src = obj.path;
     }
 
   }

src/views/fdjh/fdjh.vue

@@ -5,7 +5,7 @@
       </iframe>
     </div>
     <div id="iframe1" class="image_3 pos_3" style="">
-    <iframe  style="width: 100%;height: 100%" src="/#/table1">
+    <iframe id="showcontent" style="width: 100%;height: 100%" >
     </iframe>
     </div>
   </div>