单站监控菜单栏

src/views/ems/dzjk/index.vue

@@ -0,0 +1,63 @@
+
+
+<template>
+  <div class="ems-dashboard-editor-container">
+  <zd-select/>
+<!--  这里是单站监控的二级菜单栏 需要循环拿到数据 显示在页面上-->
+    <div class="router-container">
+      <div class="route-link" :class="{'active':item.name === $route.meta.activeSecondMenuName}" v-for="(item,index) in childrenRoute" :key="index+'dzjkChildrenRoute'">
+        <router-link  style="height: 100%;width: 100%;display: block" :to="item.path">
+        {{item.meta.title}}
+        </router-link>
+      </div>
+    </div>
+  <div class="ems-content-container ems-content-container-padding dzjk-ems-content-container">
+    <keep-alive>
+      <router-view></router-view>
+    </keep-alive>
+  </div>
+</div>
+</template>
+
+<script>
+import { dzjk } from '@/router/ems'
+const childrenRoute = dzjk[0].children[0].children//获取到单站监控下面的字路由
+console.log('childrenRoute',childrenRoute)
+import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
+export default {
+  components:{ZdSelect},
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+  .router-container{
+    display: flex;
+    .route-link{
+      width: 104px;
+      height: 40px;
+      line-height: 40px;
+      background-color: #FFBE29 ;
+      color: #666666;
+      font-size: 14px;
+      text-align: center;
+    }
+    .route-link.active{
+      background-color: #ffffff;
+      color: #333333;
+      font-weight: 500;
+    }
+  }
+  .dzjk-ems-content-container{
+    margin-top:0;
+  }
+</style>