发电计划菜单调整

src/views/fdjh/LeftNav.vue

@@ -9,32 +9,33 @@
         background-color="transparent"
         class="sidebar-el-menu"
         default-active="1"
-        text-color="#fff">
+        text-color="#fff"
+        @select="selectMenu">
       <!-- 一级菜单 -->
       <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('./img/plan.png')" style="margin-right: 10px;"
+        <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path" :id="item.path">
+          <template slot="title"><img :src="require('./img/plan.png')" style="margin-right: 12px;"
                                       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"
+            <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path" :id="itemChild.path"
                         :index="itemChild.path">
-              <template slot="title"><img style="margin-right: 10px;"
+              <template slot="title"><img style="margin-right: 12px;"
                   :src="require('./img/pc1.png')"/><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('./img/last1.png')" style="margin-right: 10px;"/><span
+              <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path" :id="itemChild_Child.path"
+                            :index="itemChild_Child.path">
+                <img :src="require('./img/last1.png')" style="margin-right: 12px;"/><span
                   slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
             </el-submenu>
 
-            <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img style="margin-right: 10px;"
+            <el-menu-item v-else :key="itemChild.path" :index="itemChild.path" :id="itemChild.path"><img style="margin-right: 12px;"
                 :src="require('./img/pc1.png')"/><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('./img/plan.png')" style="margin-right: 10px;"
+        <el-menu-item v-else :key="item.path" :index="item.path" :id="item.path"><img :src="require('./img/plan.png')" style="margin-right: 12px;"
                                                                       width="28px"/><span
             slot="title">{{ item.name }}</span></el-menu-item>
       </template>
@@ -121,16 +122,66 @@ export default {
     }
   },
   methods: {
-    changePage(obj) {
+    selectMenu(key,keyPath ,node) {
+      // 右侧区域显示页面
       var parentIframe = parent.document.getElementById('showcontent');
-      parentIframe.src = obj.path;
-    }
+      parentIframe.src = key;
+
+      // 1、2级菜单设置
+      for (var i = 0; i < document.getElementsByClassName('el-submenu').length; i++) {
+        if (node.$parent.$attrs.id == document.getElementsByClassName('el-submenu')[i].id){
+          document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('./img/pc.png');
+          document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+        }
+        else{
+          if (document.getElementsByClassName('el-submenu')[i].id != '/1'){
+            document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('./img/pc1.png');
+            document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+          }
+          if (document.getElementsByClassName('el-submenu')[i].id == '/1'){
+            // root根设置背景图
+            document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].className = "rootbg";
+          }
+        }
+      }
+
+      // 3级菜单设置
+      for (var i = 0; i < document.getElementsByClassName('el-menu-item').length; i++) {
+        if (document.getElementsByClassName('el-menu-item')[i].id == key) {
+          document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('./img/last.png');
+          document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "test";
+          document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
+        } else {
+          document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('./img/last1.png');
+          document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "";
+          document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
+        }
+      }
+    },
 
   }
 }
 </script>
 
 <style scoped>
+
+.test{
+  background: url(./img/node_bg.png) no-repeat;
+  padding-left: 8px;
+  height: 38px;
+  width: 90%;
+  display: inline-block;
+  line-height: 38px;
+}
+.rootbg{
+  background: url(./img/root_bg.png) no-repeat;
+  padding-left: 8px;
+  height: 38px;
+  width: 90%;
+  display: inline-block;
+  line-height: 38px;
+}
+
 .sidebar {
   display: block;
   text-align: left;
@@ -141,9 +192,6 @@ export default {
 }
 
 .sidebar-el-menu:not(.el-menu--collapse) {
-  //position: absolute;
-  //top: 6%;
-
   margin: 0px 0 30px 30px;
   background-size: 100% 100%;
   height: 90%;