代码调整

src/views/iscs/iscsSystemNew/index.vue

@@ -38,7 +38,7 @@ export default {
 .content-box-station{
 	width: 100%;
     height: 100%;
-    padding: 65px 0 50px 0;
+    padding: 65px 0 30px 0;
     background: #45607B;
 }
 </style>

src/views/iscs/iscsSystemNew/stationConfig/index.vue

@@ -28,6 +28,7 @@ export default {
     data() {
         return {
             mode: '',
+            stationId:'',
             stationName:'',
             fasList:[
                 'sensing',

src/views/iscs/iscsSystemNew/stationConfig/substation.vue

@@ -49,6 +49,9 @@ export default {
             this.getInitData();
         }
     },
+    mounted() {
+        this.getInitData();
+    },
     methods:{
         getInitData() {
             const params = {

src/views/iscs/iscsSystemNew/stationNav.vue

@@ -41,6 +41,22 @@
         </div>
       </div>
     </div>
+    <div class="bottom-box">
+      <div class="bottom-box-in">
+        <div v-for="button in buttonList" :key="button.id" class="eachButtonTop">
+          <div class="eachButton" :class="buttonId==button.id?'active':''" @click="showSubMenu(button)">
+            <img :src="button.icon" class="eachButtonIcon">
+            <span class="eachButtonText">{{ button.name }}</span>
+          </div>
+          <div v-if="button.children&&button.children.length>0" class="childGroup" :class="isActive(button)">
+            <div v-for="child in button.children" :key="child.id" class="childButton" :style="{cursor:child.disabled? 'not-allowed': 'pointer'}" @click="gotoPage(button,child)">
+              <div class="childButtonIn" :style="{color:child.disabled?'#c0c0c0':'#000'}">{{ child.name }}</div>
+            </div>
+            <div class="childLine" />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -309,8 +325,8 @@ export default {
                     this.stationList.push(param);
                 }
             });
+            this.selectChildren(this.buttonId);
         }
-        this.selectChildren(this.buttonId);
     },
     methods:{
         changeStation(item) {
@@ -329,19 +345,23 @@ export default {
                 type:type
             };
             this.$emit('selectIscsPane', param);
-            // const query = {
-            //     stationName: stationName,
-            //     stationId: this.selectStation,
-            //     group: this.group,
-            //     mapId: this.$route.query.mapId,
-            //     lineCode:'02',
-            //     noPreLogout:this.$route.query.noPreLogout
-            // };
-            // if (isReplace) {
-            //     this.$router.replace({ path: `/displayIscs/system/stationConfig/${type}`, query: query });
-            // } else {
-            //     this.$router.push({ path: `/displayIscs/system/stationConfig/${type}`, query: query });
-            // }
+        },
+        isActive(button) {
+            return (this.buttonId == button.id) && button.active ? 'active' : '';
+        },
+        showSubMenu(button) {
+            if (button.children && button.children.length > 0) {
+                button.active = true;
+            } else {
+                this.selectChildren(button.id);
+            }
+            this.buttonId = button.id;
+        },
+        gotoPage(button, child) {
+            if (!child.disabled) {
+                button.active = false;
+                this.selectChildren(child.id);
+            }
         }
     }
 };
@@ -536,5 +556,82 @@ export default {
     top: 45px;
     right: 8%;
 }
+.bottom-box{
+    width: 100%;
+    height: 30px;
+    background-color: #ACACAC;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding-left: 5px;
+    z-index:3;
+}
+.bottom-box-in{
+    display: inline-block;
+}
+.eachButtonTop{
+    display:inline-block;
+}
+.eachButton{
+    padding: 2px 0px;
+    background: #c0c0c0;
+    margin-top: 3px;
+    border-top: 2px #f7f7f7 solid;
+    border-left: 2px #f7f7f7 solid;
+    border-right: 2px #7e7e7e solid;
+    border-bottom: 2px #7e7e7e solid;
+    cursor: pointer;
+    font-size: 0.8vw;
+}
+.eachButton.active{
+    background: #f7f7f7;
+}
+.eachButtonText{
+    padding:0px 1vw;
+}
+.eachButtonIcon{
+    height: 0.9vw;
+    display: inline-block;
+    float: left;
+    margin-left: 5px;
+    margin-top: 0px;
+}
+.childGroup{
+    position: absolute;
+    bottom:30px;
+    background:#f0f0f0;
+    padding: 5px;
+    border-radius: 3px;
+    box-shadow: 3px 3px 4px #525252;
+    display: none;
+}
+.childGroup.active{
+    display: inline-block;
+}
+.childButton{
+    border:1px #f0f0f0 solid;
+    padding-left: 15px;
+    border-radius: 4px;
+    font-size: 14px;
+    padding-right: 10px;
+    cursor: pointer;
+}
+.childButton:hover{
+border:1px #ceddec solid;
+background:rgba(231,237,253,0.9);
+}
+.childButtonIn{
+    padding-left: 5px;
+    padding: 2px 5px;
+}
+.childLine{
+    border-right: 1px #fbfbfb solid;
+    position: absolute;
+    width: 0px;
+    height: 90%;
+    left: 20px;
+    border-left: 1px #e2e3e3 solid;
+    top: 5%;
+}
 </style>