Merge remote-tracking branch 'origin/master'

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%;

src/views/xtpzyrz/xtpz/xtpz.vue

@@ -5,10 +5,11 @@
                  style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">
                 <span style="position: absolute;top:-3px;left: 70px">风电</span>
             </div>
-            <el-row :gutter="20">
+            <el-row :gutter="10" style="width: 99%;padding-left: 22px">
                 <el-button
                         id="message_btn1"
                         class="el-icon-blue-left"
+                        style="text-align: right"
                 >断面
                 </el-button>
                 <el-button
@@ -48,7 +49,7 @@
                     :header-cell-style="{color:'#fff'}"
                     :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
                     size="mini"
-                    style="width: 1429px;font-size: 17px;background: none"
+                    style="width: 1429px;font-size: 17px;background: none;padding-left: 15px"
             >
                 <el-table-column
                         align="center"
@@ -191,7 +192,8 @@ export default {
         //弹框
         cancelForm() {
             this.getmessage = false
-        }
+        },
+
     },
     mounted() {
         const tableDataList = require('./xtpzdata.json');
@@ -210,7 +212,10 @@ export default {
 
 body {
   border: 0;
-  background-image: url(./img/beijing.png)
+  background-image: url(./img/beijing.png);
+  width: 100%;
+  height: calc(100vh);
+  background-size: 100% 100%;
 }
 
 /deep/ .el-table__header tr {
@@ -219,6 +224,25 @@ body {
 
 }
 
+.el-button:active {
+  background-color:transparent !important;
+  font-weight: bold;
+}
+/*按钮悬浮*/
+.el-button:hover {
+  background-color:transparent !important;
+  color: white !important;
+  font-weight: bold;
+  border-color: #01a8f9 !important;
+}
+/*按钮点击*/
+.el-button:focus {
+  background-color:transparent !important;
+  color: white !important;
+  font-weight: bold;
+
+  border-color: #01a8f9 !important;
+}
 .el-divider--horizontal {
   margin: 8px 0;
   background: 0 0;
@@ -231,13 +255,14 @@ body {
 .el-icon-blue-left {
   background: url("./img/bluebtn.png");
   width: 100px;
-  height: 40px;
+  height: 45px;
   padding-top: 8px;
   font-size: 25px;
   color: whitesmoke;
   border: 0px dashed;
   background-repeat: no-repeat;
   float: left;
+  padding-left: 15px;
 }
 
 .el-icon-red-right {
@@ -370,9 +395,13 @@ body {
 /deep/ .el-form-item__label {
   color: white;
 }
-
+.table-box {
+  min-height: 600px;
+  padding-left: 2px;
+  background-size: cover;
+}
 .table-wrapper {
-  width: 1483px;
+  width: 1450px;
   padding-left: 20px;
 
   .table-box {

src/views/xtpzyrz/xtpz/xtpzdata.json

@@ -35,6 +35,55 @@
     "to": "庆云",
     "height": "200",
     "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
+},{
+    "xtpzName": "汗海-庆云断面",
+    "xtpzStatus": "启用",
+    "from": "汗海",
+    "to": "庆云",
+    "height": "200",
+    "low": "250"
 }
 ]
 }